“body”上的“overflow: hidden”使用 USB 鼠标产生故障滚动条答案

【问题标题】："overflow: hidden" on "body" produces glitchy scrollbar with USB mouse“body”上的“overflow: hidden”使用 USB 鼠标产生故障滚动条
【发布时间】：2015-10-17 03:50:57
【问题描述】：

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

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

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

侧边栏打开 - 错误（body 滚动条仍然可见，产生难看的重叠）

侧边栏打开 - 好（我的解决方法：隐藏 body 滚动条，以便侧边栏滚动条单独显示）

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

悬停前（body滚动条可见）

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

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

【问题讨论】：

请您发一个Minimal, Complete, and Verifiable example，它将帮助我们解决您的问题。

标签： css google-chrome scrollbar overflow mouse

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

首先，您应该注意使用其他浏览器进行渲染 和使用 chrome 窗口。如您所知，windows 滚动条显然不一样，也没有以相同的方式渲染。您可能会对此感到惊讶。

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

这实际上可以帮助您更多地控制滚动 & overflow 和自定义 滚动条取决于你想给它的渲染。

祝你好运

【讨论】：

【解决方案3】：

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

据我所知，没有办法用 CSS 覆盖它。如果您更改您的系统偏好设置，您会发现您的网站的行为方式符合您的预期。

系统偏好设置 -> 常规 -> 显示滚动条 -> 从 [ALWAYS] 更改为 [WHEN SCROLLING]

【讨论】：

【解决方案4】：

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

下面是工作示例：https://jsfiddle.net/fuhacLtn/2/

【讨论】：

您的回答帮助我理解了我正在寻找的东西，为此点赞！你能告诉我 document.body.style.overflow = 'auto' 到底是什么吗？用于？
overflow 在内容超出元素尺寸时显示滚动条。溢出：如果内容超过容器的宽度，自动显示水平滚动条，如果超过高度，自动显示垂直滚动条。语句document.body.style.overflow = 'auto' 将溢出分配给body 元素。参考：w3schools.com/cssref/pr_pos_overflow.asp