如何使用 JavaScript 隐藏滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2486387/
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
How to hide the scrollbar using JavaScript
提问by zjm1126
How can the scrollbar be hidden? I want to do this because the scrollbar is not nice.
如何隐藏滚动条？我想这样做是因为滚动条不好。
overflow:hiddenis not useful, because my div element has many other elements.
overflow:hidden没有用，因为我的 div 元素有许多其他元素。
So setting overflowdoes not solve my problem.
所以设置overflow并不能解决我的问题。
回答by Whakkee
You can hide the scrollbar with this...
您可以使用此隐藏滚动条...
document.body.style.overflow = 'hidden';
...and unhide it with this:
...并用这个取消隐藏它：
document.body.style.overflow = 'visible';
However, you have to question yourself whether this is really what you want. Scrollbars appear for people to be able to view things that are outside of their small screens.
但是，您必须质疑自己这是否真的是您想要的。出现滚动条是为了让人们能够查看小屏幕之外的内容。
回答by HGMamaci
You have to overwrite the CSS settings as follows:
您必须按如下方式覆盖 CSS 设置：
<style type="text/css">
#YourSpecialDiv { overflow: hidden !important; }
</style>
And the div you should add the id tag i.e.
和 div 你应该添加 id 标签即
<div id="YourSpecialDiv"...>...</div>
回答by Voltra Neo
I don't think there is actually a way to just hide scrollbars properly.
What overflow:hidden, overflow-x:hiddenand overflow-y:hiddendo is actually 'if it goes outta 100vw/100vh/100vw an 100vh then do not display it'. Overflow is only do not display what's outside of the current(initial tbh) view.
我认为实际上没有一种方法可以正确隐藏滚动条。什么overflow:hidden，overflow-x:hidden以及overflow-y:hidden做其实是“如果去失控100vw / 100vh / 100vw的100vh则不会显示它。溢出只是不显示当前（初始 tbh）视图之外的内容。
It hides scrollbar because everything that is in the HTML that should be outside will not be on the page when viewing it (nothing needing scroll so no scrollbar).
它隐藏了滚动条，因为 HTML 中应该在外部的所有内容在查看时都不会出现在页面上（不需要滚动，因此没有滚动条）。
The only hide available is (here to hide the Y-axis scrollbar) :
唯一可用的隐藏是（此处隐藏 Y 轴滚动条）：
[container]{
overflow:scroll;
overflow-x:hidden;
}
[container]::-webkit-scrollbar{
width:0;
background-color:transparent;
}
Which is a real hide of scrollbar, and sadly works only on webkit-based browsers.
这是滚动条的真正隐藏，遗憾的是仅适用于基于 webkit 的浏览器。
If one day all vendors accept this then it will be amazing and we'll finally be able to hide scrollbars.
如果有一天所有供应商都接受这一点，那将是一件了不起的事情，我们最终将能够隐藏滚动条。
回答by Marouane Er-rouhi
回答by Hashbrown
The best way to do this would be some sort of pseudo element css selector. But I think only webkit (Chrome/Safari) has one for the scrollbar, so it isn't very cross browser.
最好的方法是使用某种伪元素 css 选择器。但我认为只有 webkit (Chrome/Safari)有一个 scrollbar，所以它不是很跨浏览器。
A hacky alternative is to wrap it in a div that hides away the scrollbar, by setting the widthsmaller than the contained div by the scrollbar's size
一个hacky的替代方法是将它包装在一个隐藏滚动条的div中，方法是width通过滚动条的大小设置小于包含的div
DEMO(may take a while to get the css perfect, but you get the gist)
演示（可能需要一段时间才能使 css 完美，但你明白了要点）
The problem here is that scrollbar sizes differ per-browser, so you'll have to make the outer div the largest of the scrollbars' width's smaller. And to not cut off any content in the browsers with the smaller scrollbars, it'd be best to add padding of the biggest size difference for scrollbars.
这里的问题是每个浏览器的滚动条大小不同，因此您必须使外部 div 最大的滚动条宽度较小。并且不要用较小的滚动条截断浏览器中的任何内容，最好为滚动条添加最大尺寸差异的填充。
回答by Douwe Maan
You have to use the CSS property overflow, which 'manages' what should happen when the content of a certain element exceeds its boundaries. Setting it to hiddenhides the scrollbars.
您必须使用 CSS 属性overflow，它“管理”当某个元素的内容超出其边界时应该发生的情况。将其设置为hidden隐藏滚动条。
overflow: hidden;
or
或者
someElement.style.overflow = 'hidden';
回答by Usama Ansari
var container = document.querySelectorAll("div.container")[0];
container.addEventListener("wheel", function(event) {
/*Mouse wheel scrolled down*/
if (event.deltaY > 0)
container.scrollTop += 30;
/*Mouse wheel scrolled up*/
else
container.scrollTop -= 30;
}, false);div.container {
height: 15rem;
width: 20rem;
overflow: hidden;
padding: 1rem;
border: 1px solid;
font-family: "Seoge UI", "Calibri", sans-serif;
font-size: 1.25rem;
line-height: 1.5rem;
}<div class="container">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus odio, scelerisque vel sollicitudin sed, ullamcorper sed dolor. Vivamus sed egestas nisl. Ut sollicitudin finibus tortor sit amet posuere. Cras erat massa, auctor non urna quis, interdum sollicitudin sapien. Pellentesque gravida ullamcorper est. Maecenas accumsan lobortis mauris, et auctor urna mattis et. Fusce venenatis, magna blandit faucibus sodales, tortor nunc lacinia ligula, bibendum euismod leo felis placerat velit. Fusce sed arcu vitae metus ultricies tincidunt auctor a diam. Duis at augue efficitur eros rutrum iaculis. Praesent eu maximus orci. Praesent lobortis semper elit vitae convallis. Donec consequat lectus tortor, vel aliquam diam fringilla ut. Sed ac tempus justo. Ut bibendum euismod magna, id egestas lacus pulvinar ut. Sed sit amet felis ornare, gravida leo ac, semper dui.</span> Pellentesque efficitur eget nisl tincidunt gravida. Aenean sed nisl commodo, porta lectus in, tincidunt dui. Vivamus eget nunc ipsum. Praesent sed quam odio. Proin aliquam dapibus dictum. Maecenas tristique lorem id erat venenatis, a varius nibh accumsan.
Nulla tempor sagittis odio, nec ultricies sem posuere ornare. Vestibulum sit amet consequat neque. Cras iaculis eleifend nisi. Sed erat mauris, fringilla nec congue quis, lobortis in justo. Quisque sit amet metus id ligula mattis elementum. Morbi sodales,
dui eget fringilla pretium, sem tellus posuere dolor, id pharetra neque elit ac nisl.<br /> Quisque <br />nibh<br />enim,<br />mattis<br />a<br />aliquam<br />eget,<br />luctus<br />id<br />velit.<br />Pellentesque<br />sodales<br />eros<br />eget<br
/>diam<br />gravida<br />porta.<br />Maecenas<br />leo<br />tortor,<br />malesuada<br />quis<br />euismod<br />sed,<br />dictum<br />ut<br />nulla.<br />Vestibulum<br />in<br />massa<br />a<br />quam<br />vehicula<br />placerat<br />in<br />quis<br
/>libero.<br />Maecenas<br />convallis<br />bibendum<br />faucibus.<br />In<br />porttitor<br />quis<br />justo<br />non<br />tincidunt.<br />Pellentesque<br />at<br />justo<br />tincidunt,<br />auctor<br />tortor<br />at,<br />tempus<br />eros. <br
/>Generated: 5 paragraphs, 414 words and 2814 bytes of Lorem Ipsum
</div>回答by zocoi
My eyes hurt when I read your question. However, it is impossible to hide the browser scrollbar without setting "overflow:hidden"(?!). It is a default browser behavior.
当我读到你的问题时，我的眼睛很痛。但是，如果不设置“溢出：隐藏”（？！），就不可能隐藏浏览器滚动条。这是浏览器的默认行为。
Since your div has many other elements why don't you set the proper width and height to it? Otherwise please make it scrollable so that the users can fully read your content.
既然您的 div 有许多其他元素，为什么不为其设置适当的宽度和高度？否则，请使其可滚动，以便用户可以完全阅读您的内容。
