使主滾動條始終可見 - 無需滾動

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