zoukankan      html  css  js  c++  java
  • CSS 实现隐藏滚动条同时又可以滚动

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

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

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

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

    如果要兼容 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     width: 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 }
  • 相关阅读:
    1320. Graph Decomposition 夜
    1156. Two Rounds 夜
    1176. Hyperchannels 夜
    1227. Rally Championship 夜
    1450. Russian Pipelines 夜
    1137. Bus Routes 夜
    找回c盘空间
    IDOC
    .落叶无痕水无声
    真正写的第一篇博客吧
  • 原文地址:https://www.cnblogs.com/ytwanzi/p/8058467.html
Copyright © 2011-2022 走看看