html - 在 HTML 页面上不使用滚动条滚动

Question

在我正在制作的网站中，滚动条弄乱了页面的水平对齐方式，因此我可以使用 ;

html,body{
overflow-y:hidden;
}

但是我怎样才能让页面滚动（只是不显示滚动条）？

Answer 1

如果您想要一个纯 CSS 解决方案，那么下面的代码片段将帮助您轻松实现这一目标

::-webkit-scrollbar { 
    display: none; 
}

演示（仅限 Chrome 或 Safari）

但由于这仅适用于 webkit 浏览器，您可能必须使用JS跨浏览器解决方案。

Answer 2

我认为禁用滚动条不是解决方案，因为在这种情况下，您将需要找到另一种解决方案来实际滚动页面...
比如up&down键，或者制作一个mouse selection并向下...
...这不是我认为优雅的解决方案。
（更不用说只会影响基于 webkit 的浏览器）

相反，我建议修复你的样式，这样滚动条就不会搞砸你的布局。
一种方法（不知道您的代码，仅猜测）是使用该box-sizing属性。
喜欢：

#id {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
}

因此，当边距、填充或边框发生变化时，将重新计算您赋予该#id 的宽度。

但是又一次......只是猜测，如果你想显示受滚动条影响的代码，我们可以找到一个合适的解决方案。