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;"就可以啦

  • 相关阅读:
    Extjs 中combobox下拉框初始化赋值
    关于继承的理解
    近来很郁闷
    Java String 常量池理解
    关于时间复杂度的讲解
    List、Set和数组之间的转换(转载)
    提升自我修养的具体方法有哪些?
    Mapped Statements collection does not contain value fo
    io流导出csv
    反射,System.Type类
  • 原文地址:https://www.cnblogs.com/eyed/p/7852403.html
Copyright © 2011-2022 走看看