css - HTML 和 CSS - 如何强制隐藏滚动条，但仍允许滚动？

Question

我在构建 Web 应用程序时遇到了一个烦人的方面——滚动条会影响元素的宽度，从而影响边框的定位等。

显然 Mac 在系统偏好设置中有一个选项 --> 常规(用于“显示滚动条”)称为“自动基于鼠标或触控板”和另一个称为“始终”的选项。

用户在这里做出的选择会影响我的网络应用程序的布局，这完全不在我的控制范围内

此外，基于鼠标和触控板出现的滚动条悬停在内容上而不是实际影响 HTML 元素的宽度，这显然对网站的布局有很大影响。

一个选项是设置以下 CSS:

* {
    -ms-overflow-style: none;
}

这将允许滚动但阻止显示滚动条，但它只影响 IE。

我可以为 Chrome 安装这个扩展(称为“请不要滚动条”):https://chrome.google.com/webstore/detail/no-scroll-bars-please/ahnbemfjhoibkhlijfbbjdjafbmhimdn/related?hl=en但我不一定要强制我的用户安装与我无关的第三方扩展程序，此外我不想通过推荐此选项来影响其他网站上的滚动条。

我能做什么？我希望该解决方案适用于所有浏览器操作系统组合。

Answer 1

你好溢出:自动；`

CSS:

*{margin:0;}
#container1{
    height: 100%;
    width: 100%;
    border: 1px solid green;
    overflow: hidden;
}

#container2{
    width: 100%;
    height: 99%;
    border: 1px solid blue;
    overflow: auto;
    padding-right: 15px;
}

html, body{
    height: 99%;
    border: 1px solid red;
    overflow:hidden;
}

HTML:

<div id="container1"><div id="container2">
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    good<br/>bye.
</div><div>

Fiddle