windows浏览器如何自动隐藏滚动条答案

【问题标题】：How auto hide scrollbar on windows browserwindows浏览器如何自动隐藏滚动条
【发布时间】：2018-01-12 02:11:43
【问题描述】：

我有几个带有overflow: auto 的元素。它工作得很好。在 macOS 上，滚动条会在用户不滚动时自动隐藏并出现在滚动条上。

在 Windows 和任何浏览器上，滚动条始终可见。它会产生丑陋的渲染。

那么当用户不滚动时，如何在每个操作系统和每个浏览器上自动隐藏滚动条？

我知道有很多类似的问题，但我没有找到合适的答案

【问题讨论】：

【解决方案1】：

我发现了一些东西！没想到这么简单：

.my-elem {
  overflow: hidden
} 

.my-elem:hover {
  overflow: auto
}

【讨论】：

【解决方案2】：

perfect-scrollbar 是一个

简约但完美的自定义滚动条插件

它适用于几乎所有网络浏览器，包括 Internet Explorer。

【讨论】：

【解决方案3】：

<style type="text/css">
body {
    overflow:hidden;
}
</style>

上面的代码隐藏了水平和垂直滚动条。

由于每个浏览器都有自己的默认“用户代理”样式表，您可能需要执行 CSS 重置，将所有 HTML 元素的样式重置为一致的基线。然后您的 HTML 将在所有浏览器上显示相同。

您还可以标准化。 Normalize.css 保留有用的默认值，而不是“取消样式化”所有内容。

【讨论】：