Question

我有一段文字，我想在用户滚动之前始终显示垂直滚动条手柄。我已经阅读了答案

html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

然而，似乎最初没有显示滚动条。它仅在用户开始滚动时显示。无论是否已经开始滚动，我将如何展示它？这可能吗？

谢谢！

JS小提琴例如它在滚动之前没有显示：

https://jsfiddle.net/5k59dxjy/

Answer 1

行为在Windows机器上按预期工作，但看起来MacOS和iOS都有自己的滚动条处理。您可以在this question中找到此问题。

答案中列出的一些选项是手动设置滚动条的样式，如下所示：

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
}

您还可以使用javascript在页面加载时手动滚动滚动条，只需一个像素。像这样：

$('#scrollable-section').scrollTop(1).scrollTop(0);

使主滚动条始终可见 - 无滚动

1 个答案: