zoukankan      html  css  js  c++  java
  • 纯CSS手动滑动轮播图(隐藏滚动条)

    HTML:

    <div class="bigder">
      <div class="big">
    
        <dl>
    
          <dt><img src="img/dongtai.png"/></dt>
    
        </dl>
    
        <dl>
    
          <dt><img src="img/dongtai.png"/></dt>
    
        </dl>   
    
        <dl>
    
          <dt><img src="img/dongtai.png"/></dt>
    
        </dl>   
    
        <dl>
    
          <dt><img src="img/dongtai.png"/></dt>
    
        </dl>   
    
        <dl>
    
          <dt><img src="img/dongtai.png"/></dt>
    
        </dl>
    
      </div>
    </div>
    

      

    CSS:

    .bigder{ 100%;margin: 0 auto;height: 195px;overflow: hidden;}
    .big{overflow-x: scroll;height: 210px; display:flex;justify-content: space-between;}
    .bigder dl{background-color: ghostwhite;text-align: center;margin-right: 20px;}
    .bigder dl:last-child{padding-right: 0;}

      

    其实横向轮播很简单,只要宽度超出父级就可以滑动,主要是滚动条要隐藏,最外层和第二层都要有固定高度,然后外层比内层高度高一点,滚动条在最下面,然后最外层overflow:hidden;就可以啦

    对比图:

    之前:

    之后:

     其实还有一些简单的方法,但只限于-webkit内核的,支持C3的浏览器:

      1)::-webkit-scrollbar {/*隐藏滚轮*/ display: none; }

      2)::-webkit-scrollbar{0px}

     但是,能用纯CSS,就最好不用这些

    还有,既然说到隐藏滚动条,就多说点,Ionic隐藏滚动条:

    给ion-content加上overflow-scroll="true",还有style="overflow:auto;"就可以啦

  • 相关阅读:
    王妃
    某个奇怪的引理 学习总结
    多项式求ln,求exp,开方,快速幂 学习总结
    第二类斯特林数 学习总结
    cojs QAQ的图论题 题解报告
    cojs QAQ的序列 解题报告
    QAQ OI生涯の最后一个月
    cojs 疯狂的字符串 题解报告
    【51Nod 1238】最小公倍数之和 V3
    【51Nod 1190】最小公倍数之和 V2
  • 原文地址:https://www.cnblogs.com/eyed/p/7852403.html
Copyright © 2011-2022 走看看