如何使滚动条始终可见

Question

我想让滚动条始终可见。 问题是我在 chrome 和 safari 中看到它，但在 Iphone 和 mozilla 中看不到。

我有下一个代码

<div class="scrollbar">
   Scrollable content
</div>

css代码如下：

/* Scroll thumb styles */
.scrollbar::-webkit-scrollbar {
    background-color: #f5f5f5;
    border-radius: 10px;
    width: 100%;
    height: 2px;
}
.scrollbar::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 10px;
}

在 Android 设备或 Chrome 和 Safari 在桌面上，我看到如下内容：

但是在 Iphone safari 上我看不到它：

当我开始滚动时我看到它并且它具有默认样式。

任何想法？

Answer 1

要使两个滚动条始终可见，请使用溢出：滚动，仅使 x 轴滚动条可见，对 y 轴使用溢出-x 和溢出-y。 使用 overflow: auto 当你想在内容大于容器时显示滚动条

Answer 2

将 width: 100% 更改为 width: 7px 即可

::-webkit-scrollbar {
    background-color: #f5f5f5;
    border-radius: 10px;
    width: 7px;
    height: 2px;
}
::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 10px;
}