将滚动条隐藏在HTML页面上

可使用CSS隐藏滚动条吗？ 你会怎么作？

---

#1楼

我只是觉得我会指出其余人，阅读这个问题，即在body元素上设置overflow: hidden （或overflow-y）不会为我隐藏滚动条。

我不得不使用html元素。

---

#2楼

WebKit支持能够用标准CSS规则隐藏的滚动条伪元素：

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

若是要隐藏全部滚动条，请使用

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

我不肯定要还原-确实能够，可是可能有正确的方法：

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

固然，您始终可使用width: 0 ，而后可使用width: auto轻松地恢复它，可是我不喜欢滥用width来进行可见性调整。

Firefox 64如今默认状况下支持实验性scrollbar-width属性 （63须要设置配置标志）。 要在Firefox 64中隐藏滚动条：

#element {
    scrollbar-width: none;
}

要查看您当前的浏览器是否支持伪元素或scrollbar-width ，请尝试如下代码段：

.content { /* These rules create an artificially confined space, so we get a scrollbar that we can hide. They are not directly involved in hiding the scrollbar. */ border: 1px dashed gray; padding: .5em; white-space: pre-wrap; height: 5em; overflow-y: scroll; } .content { /* This is the magic bit for Firefox */ scrollbar-width: none; } .content::-webkit-scrollbar { /* This is the magic bit for WebKit */ display: none; }

<div class='content'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus facilisis a. Vivamus vulputate enim felis, a euismod diam elementum non. Duis efficitur ac elit non placerat. Integer porta viverra nunc, sed semper ipsum. Nam laoreet libero lacus. Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum, eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium volutpat. Duis elementum magna vel velit elementum, ut scelerisque odio faucibus. </div>

---

（请注意，这并非一个正确的答案，由于它也隐藏了水平条，但这就是我在Google指着我在这里时要寻找的东西，所以我认为我仍是会发布它。）

---

#3楼

若是您正在寻找隐藏移动设备滚动条的解决方案，请遵循Peter的回答 ！

这是一个jsfiddle ，它使用下面的解决方案隐藏水平滚动条。

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

它已在装有Android 4.0.4的三星平板电脑（冰淇淋三明治，在本机浏览器和Chrome中）和在装有iOS 6的iPad（在Safari和Chrome中）进行了测试。

---

#4楼

除了彼得的答案：

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

对于Internet Explorer 10，这将相同：

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

---

#5楼

若是您仍然感兴趣，我想我为您找到了一种解决方法。 这是个人第一周，但对我有用。

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

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