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

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