转载-慕课网-隐藏滚动条，但仍然可以滚动

更新： Firefox现在支持使用CSS隐藏滚动条，因此现在涵盖了所有主流浏览器（Chrome，Firefox，IE，Safari等）。

只需将以下CSS应用于要从中删除滚动条的元素：

.container {
overflow-y: scroll;
scrollbar- none; /* Firefox /
-ms-overflow-style: none; / IE 10+ /}.container::-webkit-scrollbar { / WebKit */
0;
height: 0;}
这是我目前所知道的最少hacky跨浏览器解决方案。看看演示。

原始答案：

这是另一种尚未提及的方式。它非常简单，只涉及两个div和CSS。不需要JavaScript或专有CSS，它适用于所有浏览器。它不需要明确地设置容器的宽度，从而使其流动。

此方法使用负边距将滚动条移出父级，然后使用相同数量的填充将内容推回到其原始位置。该技术适用于垂直，水平和双向滚动。

演示：

垂直

横

两个方向

垂直版本的示例代码：

HTML：

Your content.

CSS：

.parent{
400px;
height: 200px;
border: 1px solid #aaa;
overflow: hidden;}.child{
height: 100%;
margin-right: -50px; /* maximum width of scrollbar /
padding-right: 50px; / maximum width of scrollbar */
overflow-y: scroll;}