CSS可以用来隐藏滚动条吗?你会怎么做?


当前回答

除了彼得的回答:

#element::-webkit-scrollbar {
    display: none;
}

这对Internet Explorer 10的作用相同:

 #element {
      -ms-overflow-style: none;
 }

其他回答

隐藏滚动条的跨浏览器方法。

它在Edge、Chrome、Firefox和Safari上进行了测试

隐藏滚动条,同时仍然可以使用鼠标滚轮滚动!

代码笔

/* Make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* Make the child visible */
#child {
    visibility: visible;
}

如果你们还感兴趣的话,我想我为你们找到了一个变通办法。这是我的第一个星期,但这对我很有用。。。

<div class="contentScroller">
    <div class="content">
    </div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

WebKit支持可以使用标准CSS规则隐藏的滚动条伪元素:

#element::-webkit-scrollbar {
    display: none;
}

如果要隐藏所有滚动条,请使用

::-webkit-scrollbar {
    display: none;
}

我不确定是否要恢复-这确实有效,但可能有一种正确的方法:

::-webkit-scrollbar {
    display: block;
}

当然,您可以始终使用width:0,然后可以使用width:auto轻松恢复,但我不喜欢滥用width来调整可见性。

Firefox 64现在默认支持实验性的滚动条宽度属性(63需要设置配置标志)。要在Firefox 64中隐藏滚动条:

#element {
    scrollbar-width: none;
}

要查看当前浏览器是否支持伪元素或滚动条宽度,请尝试以下代码段:

.内容{/*这些规则创造了一个人工封闭的空间我们可以隐藏的滚动条。他们不直接参与隐藏滚动条*/边框:1px灰色虚线;衬垫:.5cm;空白:预换行;高度:5米;overflow-y:滚动;}.内容{/*这是Firefox的神奇之处*/滚动条宽度:无;}.content::-webkit滚动条{/*这是WebKit的神奇之处*/显示:无;}<div class='content'>Lorem ipsum dolor坐amet,consectetur adipiscing elit。Mauris欧盟urna和leo aliquet malesuada ut ac dolor。融合非弧形舌费门特姆索达莱斯是一位智者。安静地坐在委内瑞拉埃格斯塔斯。整数vite tempor enim。在达皮布斯尼塞尔坐amet purus conguetincidunt。Morbi tincidunt ut eros in rutrum。Sed quam erat,福西布斯水平tempor et,元素在tortor。弧形立面的实际自由度莫莉-乌特-智人。苏西庇特厄洛斯,欧盟泰勒斯facilisis a.Vivamus vulputate enim felis,一种直径为euismod的元素不。Duis efficiuit ac elit non-placerat。整数porta-viverra nunc,sed semper ipsum。越南自由贸易区。坐在猫的旁边。Sed impredite,nunc ut portal elementum,厄洛斯·米·埃格斯塔斯·尼布,法利西斯·鲁特鲁姆·萨皮恩·多尔·居斯托。Quisque公司nec magna erat公司。交通工具相(Phasellus vehicula porttitor nulla et dictum)。轿车tincidunt scelersque finibus。麦地那斯(Maecenas consequat massa aliquam pretium)volutpat。Duis elementum magna vel velit elementum,ut scelerisque奥迪奥·福西布斯。</div>


(请注意,这并不是这个问题的正确答案,因为它也隐藏了水平条,但当谷歌将我指向这里时,我正在寻找这一点,所以我想无论如何我都会发布它。)

正如其他人已经说过的,使用CSS溢出。

但如果您仍然希望用户能够滚动该内容(滚动条不可见),则必须使用JavaScript。

在这里回答我的问题:隐藏滚动条,同时仍然可以使用鼠标/键盘滚动

即使溢出,我的答案也会滚动:隐藏;,使用jQuery:

例如,使用鼠标滚轮水平滚动:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
    $(function() {

       $("YourSelector").mousewheel(function(event, delta) {

          this.scrollLeft -= (delta * 30);
          event.preventDefault();
       });
    });
</script>