完全删除水平滚动条
有没有办法完全摆脱网页上的水平滚动条?
命令“overflow-x:hidden;”在 body/html 上隐藏了视觉样式,但如果您使用键盘上的箭头,功能实际上仍然存在,这有点糟糕......
Is there a way to get completely rid of the horizontal scrollbar on a webpage?
The command "overflow-x:hidden;" on body/html hides the visual style, but the functionality is actually still there if you use the arrows on your keypad, which kind of sucks...
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您问如何摆脱滚动条,是的,
overflow:hidden
就是正确的方法。如果问题是如何避免滚动,那么最好的方法是设计不会溢出的网页,可能会结合使用动态流畅设计和媒体查询来保持所包含内容的宽度和高度。
但我实际上建议反对这样做。您无法事先知道访问者将拥有多大的窗口。您是否想过大屏幕和小屏幕的可用性差异?移动浏览器怎么样?
如果你真的决定永远不允许滚动,你可以使用以下 css 作为鬼鬼祟祟的技巧:
但正如我所说,我不会推荐它......而且,它可能不适用于较旧的浏览器。我想到了IE6。也许IE7也...
You ask how to get rid of the scrollbar, and yes,
overflow: hidden
is the way to go.If the question is about how to avoid scrolling, your best approach is to design web pages that don't overflow, possibly using a combination of dynamic fluent designs and media queries to keep width and height of your content contained.
But I would actually recommend against that. There is no way for you to know beforehand what size of window your visitors will have. Have you thought of the useability differences in large screens and small screens? How about mobile browsers?
If you are really fixed on never allowing scroll, you could use the following css as a sneaky-devil trick:
But as I said, I wouldn't recommend it... Also, it probably won't work with older browsers. IE6 comes to mind. Maybe IE7 also...
您无法禁用用户滚动的能力,只能禁用视觉助手(例如滚动条)。如果您不想滚动,则必须将页面的宽度保持在浏览器窗口视口的宽度以下。您可以通过根据视口大小流动和调整元素大小来做到这一点。
You can't disable the users ability to scroll, you can only disable the visual helpers (eg. scrollbars). If you don't want any scrolling you have to keep the width of your pages below the width of the viewport of the browserwindow. You can do that by flowing and resizing the elements based on the viewport-size.
遗憾的是,只有一种非 CSS 方法可以解决这个问题:您必须使用
onscroll
来防止 JavaScript 滚动。不要指望preventDefault()
能够工作 - 你必须更有创意:scrollTo(0,0)
查看另一个问题的答案:如何暂时禁用滚动?。
Sadly there is only a non-CSS way to fix that: You have to prevent scrolling with JavaScript using
onscroll
. Don't expectpreventDefault()
to work though - you have to be more creative:scrollTo(0,0)
Check out the answer on a different question: How to disable scrolling temporarily?.