gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:02:59 25 4
gpt4 key购买 nike

我试图在所有浏览器(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 中无效。此外,我越来越怀疑这种方法是否是正确的解决方案。有人可以给我建议吗?

最佳答案

设置溢出:隐藏;在 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>

关于html - 在可滚动元素上隐藏滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33888926/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com