我想要什么

Question

我遇到了如何设置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的问题（在移动设备上运行或在开发模式下运行以查看类似移动设备的滚动条并重现问题）：

＆＃13;

body {
    width: 250px;
}

pre {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 10px;
    overflow-x: auto;
    box-sizing: content-box;
    font-size: 90%;
}

＆＃13;

<body><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"script.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;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">&gt;</span>Download !<span class="nt">&lt;/a&gt;</span></code></pre></body>

＆＃13;

Answer 1

在越来越多地查看Google的页面后，我找到了答案。

首先，我发现在Chrome开发工具中看不到负责此操作的CSS。实际设置滚动条样式的部分位于页面上的单独<style>元素中，并且似乎需要一些元素以在需要时始终显示滚动条。以下是相同的最小示例，经过修改以展示所需内容：

＆＃13;

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);
}

＆＃13;

<body><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"script.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;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">&gt;</span>Download !<span class="nt">&lt;/a&gt;</span></code></pre></body>

＆＃13;

如果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 */
}

Div的滚动条在Android

我想要什么

我拥有什么

实施例

我尝试了什么

1 个答案: