html - 在可滚动元素上隐藏滚动条

Question

我试图在所有浏览器(Safari、Chrome Firefox、IE10 和 IE11、Edge 和 Mobile Safari)中隐藏滚动条

HTML 看起来像这样:

<section class="no-scroll">
    <ol>
        <li class="s">1</li>
        <li class="c">c</li>
        ....
    </ol>
</section>

它是一个水平 slider 。现在，我有以下隐藏它

.no-scroll::-webkit-scrollbar {display:none;}
.no-scroll::-moz-scrollbar {display:none;}
.no-scroll::-o-scrollbar {display:none;}
.no-scroll::-google-ms-scrollbar {display:none;}
.no-scroll::-khtml-scrollbar {display:none;}

section {
    ...
    overflow-x: scroll;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

DEMO

这似乎在 Safari 和 Chrome 中有效，但在 IE 和 Firefox 中无效。此外，我越来越怀疑这种方法是否是正确的解决方案。有人可以给我建议吗？

Answer 1

设置溢出:隐藏；在 body 标签上是这样的:

<style type="text/css">
 body {
     overflow:hidden;
  }
 </style>

上面的代码隐藏了水平和垂直滚动条。

如果只想隐藏垂直滚动条，使用overflow-y:

  <style type="text/css">
  body {
      overflow-y:hidden;
  }
  </style>

如果你只想隐藏水平滚动条，使用 overflow-x:

  <style type="text/css">
  body {
      overflow-x:hidden;
  }
  </style>

如果你想隐藏特定元素的滚动条，那么使用像 id 或 class 这样的标识符来代替 body，如下所示

   <style type="text/css">
        .no-scroll{
              overflow:hidden;
        }
    </style>