jquery - 如何使用jquery从正文中隐藏滚动条

Question

我想使用 Jquery 隐藏滚动条。谁能帮我解决这个问题？

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

这适用于 Chrome，但我希望我的滚动条对所有浏览器都隐藏，我该怎么做？

Answer 1

您的代码只能在 Chrome 中运行的原因是您使用的是 -webkit-scrollbar。 Chrome 是建立在(修改过的)webkit 渲染引擎之上的，所以这个标签只会影响 Chrome(顺便说一句，还有 Safari)。通常，-webkit-scrollbar 属性用于设置滚动条的样式。要隐藏它们，请改用 overflow 属性。这是一个 CSS 解决方案:

body {
    overflow: hidden;
}

如果你想在 jQuery 中做同样的事情，按照要求尝试动态添加 overflow 属性，如下所示:

$("body").css("overflow", "hidden");

请注意，您不必将此属性应用于整个 body 。任何有效的选择器都可以!

如果您试图隐藏滚动条，但仍然允许滚动，那么您将不得不对如何进行操作有点棘手。尝试添加一个带有 overflow: auto 和一些右填充的内部容器。这将允许滚动条被推出包含的 div，有效地隐藏它。

查看这个 fiddle 以查看它的实际效果:http://jsfiddle.net/zjfdvmLx/

这种方法的缺点是它不是完全跨浏览器友好的。每个浏览器决定滚动条的宽度，并且可以随时更改。如果 fiddle 中使用的 15px 对您的浏览器来说不够，请增加该值。

参见 this回答更多信息。