Html CSS 隐藏滚动条，但元素可滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43186015/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS hide scroll bar, but have element scrollable
提问by user979331
I have this element called items and the content inside the element is longer than the element height, I want to make it scrollable but hide the scroll bar, how would I do that?
我有一个叫做 items 的元素，元素内的内容比元素高度长，我想让它滚动但隐藏滚动条，我该怎么做？
<div class="left-side">
<div class="items" style="display:block;width: 94%;margin: 0 auto;overflow: hidden;">
</div>
</div>
.left-side {
width: 1470px;
padding-top: 20px;
height: 878px;
}
I tried setting the left-side class overflow to auto, but that didn't do anything.
我尝试将左侧类溢出设置为自动，但这没有任何作用。
回答by Kiloumap Mrz
You can hide it :
你可以隐藏它：
html {
overflow: scroll;
}
::-webkit-scrollbar {
width: 0px;
background: transparent; /* make scrollbar transparent */
}
For further information, see : Hide scroll bar, but while still being able to scroll
有关更多信息，请参阅：隐藏滚动条，但仍然可以滚动
回答by danielricecodes
I combined a couple of different answers in SO into the following snippet, which should work on all, if not most, modern browsers I believe. All you have to do is add the CSS class .disable-scrollbarsonto the element you wish to apply this to.
我将 SO 中的几个不同答案组合到以下代码段中，这些代码段应该适用于我相信的所有（如果不是大多数）现代浏览器。您所要做的就是将 CSS 类添加.disable-scrollbars到您希望将其应用到的元素上。
.disable-scrollbars::-webkit-scrollbar {
width: 0px;
background: transparent; /* Chrome/Safari/Webkit */
}
.disable-scrollbars {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
And if you want to use SCSS/SASS:
如果你想使用 SCSS/SASS：
.disable-scrollbars {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
&::-webkit-scrollbar {
width: 0px;
background: transparent; /* Chrome/Safari/Webkit */
}
}
回答by Yvonne Aburrow
if you really want to get rid of the scrollbar, split the information up into two separate pages.
如果您真的想摆脱滚动条，请将信息分成两个单独的页面。
Usability guidelines on scrollbars by Jakob Nielsen:
There are five essential usability guidelines for scrolling and scrollbars:
- Offer a scrollbar if an area has scrolling content. Don't rely on auto-scrolling or on dragging, which people might not notice.
- Hide scrollbars if all content is visible. If people see a scrollbar, they assume there's additional content and will be frustrated if they can't scroll.
- Comply with GUI standards and use scrollbars that look like scrollbars.
- Avoid horizontal scrolling on Web pages and minimize it elsewhere.
- Display all important information above the fold. Users often decide whether to stay or leave based on what they can see without scrolling. Plus they only allocate 20% of their attention below the fold.
滚动和滚动条有五个基本的可用性指南：
- 如果区域具有滚动内容，则提供滚动条。不要依赖自动滚动或拖动，人们可能不会注意到。
- 如果所有内容都可见，则隐藏滚动条。如果人们看到滚动条，他们会认为还有其他内容，如果无法滚动，他们会感到沮丧。
- 遵守 GUI 标准并使用看起来像滚动条的滚动条。
- 避免在网页上水平滚动并在其他地方将其最小化。
- 在首屏显示所有重要信息。用户通常根据无需滚动即可看到的内容来决定是留下还是离开。此外，他们只将 20% 的注意力分配到折叠之下。
To make your scrollbar only visible when it is needed (i.e. when there is content to scroll down to), use overflow: auto.
要使滚动条仅在需要时可见（即当有内容可向下滚动时），请使用overflow: auto.
回答by Sudipto
You can make use of the SlimScrollplugin to make a div scrollable even if it is set to overflow: hidden;(i.e. scrollbar hidden).
即使设置为（即隐藏滚动条），您也可以使用SlimScroll插件使 div 可overflow: hidden;滚动。
You can also control touch scroll as well as the scroll speed using this plugin.
您还可以使用此插件控制触摸滚动以及滚动速度。
Hope this helps :)
希望这可以帮助 ：）
回答by hellomello
Similar to Kiloumap L'artélon's answer,
类似于 Kiloumap L'artélon 的回答，
::-webkit-scrollbar {
display:none;
}
works too
也能用
回答by Pedro JR
work on all major browsers
适用于所有主要浏览器
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
回答by Erik P.
if you use sass, you can try this
如果你使用 sass，你可以试试这个
&::-webkit-scrollbar {
}
