完全删除水平滚动条

Question

有没有办法彻底摆脱网页上的水平滚动条？

命令“overflow-x：hidden;”在body / html上隐藏了视觉风格，但如果你使用键盘上的箭头，那么功能实际上仍然存在，哪种类型很糟糕......

Answer 1

你问如何摆脱滚动条，是的，overflow: hidden是要走的路。

如果问题是关于如何避免滚动，那么最好的方法是设计不会溢出的网页，可能使用动态流畅设计和媒体查询的组合来保持内容的宽度和高度。

但我实际上会建议不要这样做。您无法事先知道访问者的窗口大小。您是否想过大屏幕和小屏幕的可用性差异？移动浏览器怎么样？

如果你真的坚持从不允许滚动，你可以使用以下css作为偷偷摸摸的魔鬼技巧：

body {
    position: fixed;
    left: 0px;
    top: 0px;
}

但正如我所说，我不推荐它......此外，它可能不适用于旧版浏览器。 IE6浮现在脑海中。也许IE7也......

Answer 2

您无法禁用用户滚动的功能，您只能禁用视觉助手（例如滚动条）。如果您不想进行任何滚动，则必须将页面宽度保持在浏览器窗口视口的宽度之下。您可以通过基于视口大小流动和调整元素大小来实现。

Answer 3

可悲的是，只有非CSS方法可以解决这个问题：您必须使用onscroll阻止使用JavaScript进行滚动。不要指望preventDefault()能够发挥作用 - 你必须更具创造性：

1. 使用scrollTo(0,0)
2. 或
   • 阻止所有箭头/页面键输入
   • 阻止所有鼠标滚轮输入

在另一个问题上查看答案：How to disable scrolling temporarily?。