zoukankan      html  css  js  c++  java
  • 纯css实现移动端横向滑动列表&&overflow:atuo;隐藏滚动条

    <!DOCTYPE html>
    <html>
    <head>
        <title>横向滑动</title>
        <style type="text/css">
            .slide-box{
                margin-top: 200px;
                display: -webkit-box;
                overflow-x: scroll;
                -webkit-overflow-scrolling:touch;
            }
            .slide-item{
                 200px;
                height: 200px;
                border:1px solid #ccc;
                margin-right: 30px;
            }
        </style>
    </head>
    <body>
        <div class="slide-box">
            <div class="slide-item"></div>
            <div class="slide-item"></div>
            <div class="slide-item"></div>
            <div class="slide-item"></div>
            <div class="slide-item"></div>
        </div>
    </body>
    </html>


    ==============================================

    overflow:atuo;隐藏滚动条

    动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动?

    使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚动的特性。 
    由于只需要兼容移动浏览器(Chrome 和 Safari),于是想到了自定义滚动条的伪对象选择器

    ::-webkit-scrollbar。
    • 1

    应用如下 CSS 可以隐藏滚动条:

    .element::-webkit-scrollbar {display:none}
    • 1

    如果要兼容 PC 其他浏览器(IE、Firefox 等),国外一位才人 John Kurlak 也研究出了一种办法。在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样,就变相隐藏了。

    1.  
      <div class="outer-container">
    2.  
      <div class="inner-container">
    3.  
      <div class="content">
    4.  
      ......
    5.  
      </div>
    6.  
      </div>
    7.  
      </div>
    8.  
      .outer-container,.content {
    9.  
      200px; height: 200px;
    10.  
      }
    11.  
      .outer-container {
    12.  
      position: relative;
    13.  
      overflow: hidden;
    14.  
      }
    15.  
      .inner-container {
    16.  
      position: absolute; left: 0;
    17.  
      overflow-x: hidden;
    18.  
      overflow-y: scroll;
    19.  
      }
    20.  
       
    21.  
      /* for Chrome */
    22.  
      .inner-container::-webkit-scrollbar {
    23.  
      display: none;
    24.  
      }
  • 相关阅读:
    第二阶段:冲刺2(个人界面的优化---头像上传)
    第二阶段:冲刺1(任务的分配)
    学习进度第12周
    读书笔记《人月神话》1
    学习进度第11周
    读书笔记《编程珠矶》3
    学习进度第10周
    第一阶段:冲刺10(完结)
    第十五周学习进度总结
    第十四周学习进度总结
  • 原文地址:https://www.cnblogs.com/xiaoxiaoxun/p/11147110.html
Copyright © 2011-2022 走看看