Question

我正在构建一个Web应用程序并使用Google Chrome进行测试。我有一个侧边栏元素，如果我将鼠标悬停在该元素上，我想禁用body元素的滚动。

我是通过在用户将鼠标悬停在侧边栏上时使用CSS在overflow: hidden标记上设置body来实现此目的的。我在没有插入USB鼠标的浏览器上对此进行了测试，效果很好：

边栏已关闭（body滚动条可见）

补充工具栏打开 - 错误（body滚动条仍然可见，产生丑陋的重叠）

补充工具栏打开 - 良好（我的修复：隐藏body滚动条，以便单独显示侧边栏滚动条）

这是有效的，因为Google Chrome不会将滚动条渲染为实际元素（具有宽度）。但是，当我插入USB鼠标时，滚动条现在有宽度。因此，当我将鼠标从滚动条外部移动到滚动条内部时，宽度会突然改变：

悬停前（body滚动条可见）

悬停后 - 错误（隐藏body滚动条，突然缩小整个侧边栏的宽度）

这会产生一种非常丑陋和不明显的视觉效果，当您将鼠标悬停在它们上方时，元素的宽度会发生变化。我到处寻找解决方案......任何帮助都会非常感激！非常感谢！

Answer 1

如果您使用的是Mac，那么当您插入鼠标时，您的操作系统可能会添加滚动条，滚动条将覆盖大多数CSS选择器。

我无法用CSS覆盖这个方法。如果您更改系统偏好设置，您会发现您的网站的行为符合您的预期。

系统偏好设置 - ＆gt;一般 - ＆gt;显示滚动条 - ＆gt;从[ALWAYS]更改为[WHEN SCROLLING]

Answer 2

为body元素指定width将使内容宽度保持不变。

Answer 3

首先，您应该注意使用其他浏览器进行渲染以及使用chrome窗口。如您所知， windows 滚动条显然不相同，并且不以相同的方式呈现。你可能会对此感到意外。

否则你可能应该注意jQuery custom content scroller插件。

这实际上可以帮助您更多地控制滚动＆amp; overflow和自定义 滚动条，具体取决于您要提供给它的渲染。

祝你好运

Answer 4

.MY_CSS_CLASS::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background: transparent;
}

这解决了我在连接鼠标时显示丑陋滚动条的问题。