禁用滚动条
如果您访问 http://google.com,您会注意到滚动条被禁用。
在我的网站上,为了避免页面移动烦扰用户,我希望每个页面上都有一个滚动条。但是,如果页面确实不需要滚动,请禁用滚动条。
这似乎是一项微不足道的任务,但我似乎找不到解决方案。也许我只是错过了一些东西。
无论如何,有人可以帮助解决这个问题吗?谢谢。
If you go to http://google.com, you will notice that there is a disabled scrollbar.
On my site, to avoid annoying the user with page shifting, I want a scrollbar on every page. But, if the page truly does not need to scroll have the scrollbar disabled.
This seems like a trivial task, but I can't seem to find the solution. Perhaps I'm just missing something.
Anyway, can anyone help with this issue? Thanks.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
overflow: auto
使滚动条在需要时出现,在不需要时消失。要使滚动条始终出现,请使用“scroll”overflow: auto
makes the scrollbar appear when needed and disappear when not. For the scrollbar to always appear, use "scroll"没有办法用 javascript 来禁用滚动条,但是可以将 css
overflow
属性设置为auto
这样,当有溢出时,滚动条可用,当有溢出时,滚动条可用。没有溢出,滚动条被禁用。将其应用于身体很可能是最好的解决方案:There is no way to disable the scrollbar with javascript, but you can set the css
overflow
property toauto
so that when there is overflow, the scrollbar is available, and when there is no overflow, the scrollbar is disabled. Applying this to the body will most likely be the best solution:滚动条在那里,但根据您使用的浏览器而被禁用。我在 Mac 上使用 FireFox,并且您提供的示例中没有滚动条。
不幸的是,这是我在开发网站时遇到的烦恼之一。我很确定
(正如其他人的回答)不能解决问题。如果页面需要滚动条,它会添加它,但如果不需要,您使用的浏览器将决定是否显示禁用的滚动条或根本不显示滚动条。我还没有找到解决这个问题的方法。
更正
在查看了@Stephen P的答案后,我认为他说对了。我没有测试过,但这是有道理的。
the scroll bar is there but disabled depending on what browser you're using. I'm using FireFox on the Mac and there is no scroll bar on the example you provided.
Unfortunately this is one of the annoyances I've come to deal with when developing websites. I'm pretty sure that
<body style="overflow:hidden;">
(as others have answered) does not solve the problem. If the page needs a scrollbar, it will add it, but if it doesn't, the browser you use will determine whether or not to show a disabled scroll bar or no scroll bar at all. I haven't found a solution to this problem.Correction
After reviewing @Stephen P's answer, I think he's on to something. I haven't tested it, but it makes sense.