完全移除水平滚动条

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?。