我遇到了一个问题，不知道如何设置 div 的样式，以便在出现溢出时滚动条仅在必要时显示，但在必要时始终显示。
我面临的问题是，在我的浏览器中查看它时，以及模拟和使用实际 Android 设备时，行为都不同。
我想要什么
This page on PageSpeed Insights具有我正在寻找的确切行为。它显示一个滚动条，该滚动条在需要时始终可见，在不需要时完全隐藏。
Android 上的屏幕截图:由于溢出，滚动条始终可见
桌面上的屏幕截图:根本没有滚动条
我有什么
目前，该行为在桌面上正常。需要时有滚动条，不需要时隐藏。
但在 Android 上，滚动条仅在用户滚动时可见，并在释放后立即消失。这是它的样子:
Android:溢出，但底部没有滚动条。它应该是可见的!
Android :用户当前正在按下 div 进行滚动，并且会出现该栏。 (这是左下角的黑色矩形)
Android : 用户在中间释放了div，滚动条又消失了。不是有意的，它应该是可见的!
例子
我正在处理的实时页面在这里:https://www.protectator.ch/post/infinite-download-javascript但如果您想查看更少的代码，我会在下一节中提供一个最小的工作示例。
我尝试了什么
我阅读了一些关于卷轴的 SO 帖子，但我发现没有一个适用于该特定情况。我试过查看页面 I mentioned earlier以我喜欢的方式工作，我找不到我缺少什么 CSS 属性来重现该行为。
这是一个最小的工作示例，它演示了我遇到的相关 HTML 和 CSS 问题(在移动设备或开发模式下运行它以查看类似移动设备的滚动条并重现问题):
body {
width: 250px;
}
pre {
background-color: rgba(0, 0, 0, 0.2);
padding: 10px;
overflow-x: auto;
box-sizing: content-box;
font-size: 90%;
}<body><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">src=</span><span class="s">"script.js"</span><span class="nt">></script></span>
<span class="nt"><a</span> <span class="na">id=</span><span class="s">"link"</span> <span class="na">download=</span><span class="s">"file.txt"</span><span class="nt">></span>Download !<span class="nt"></a></span></code></pre></body>最佳答案
在越来越多地查看 Google 的页面后，我找到了答案。
首先，我发现负责此的 CSS 在 Chrome 开发工具中不可见。实际设置滚动条样式的部分位于单独的 <style> 中。页面上的元素，并且某些元素似乎需要在需要时始终显示滚动条。这是相同的最小示例，经过修改以展示所需内容:
body {
width: 250px;
}
pre {
background-color: rgba(0, 0, 0, 0.2);
padding: 10px;
overflow-x: auto;
box-sizing: content-box;
font-size: 90%;
}
pre::-webkit-scrollbar {
height: 12px;
}
pre::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .3);
}<body><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">src=</span><span class="s">"script.js"</span><span class="nt">></script></span>
<span class="nt"><a</span> <span class="na">id=</span><span class="s">"link"</span> <span class="na">download=</span><span class="s">"file.txt"</span><span class="nt">></span>Download !<span class="nt"></a></span></code></pre></body>如果 pre::-webkit-scrollbar没有定义的高度，或者 pre::-webkit-scrollbar-thumb没有风格，酒吧不会显示。我认为这是因为在更改滚动条的样式时，默认样式的大多数默认值为零，没有可见部分。
因此，为了让它工作，添加到可滚动元素的最小样式是:
::-webkit-scrollbar {
height: 12px; /* At least not zero */
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .3); /* Or any other instruction making the element visible */
}
关于css - Android上div的滚动条消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42682502/