在CSS中,可以使用position
屬性來固定滾動條的位置,可以將滾動條的容器元素設(shè)置為position: fixed
,這樣滾動條就會固定在瀏覽器窗口的某個位置,不會隨著頁面的滾動而移動。
如果要將滾動條固定在瀏覽器窗口的右側(cè),可以將滾動條的容器元素設(shè)置為:
.scrollbar-container { position: fixed; right: 0; top: 0; width: 10px; height: 100%; background-color: #f0f0f0; z-index: 999; }
上述代碼中,.scrollbar-container
是滾動條的容器元素,position: fixed
將其固定在瀏覽器窗口的右側(cè),right: 0
設(shè)置其右側(cè)距離為0,top: 0
設(shè)置其頂部距離為0,width: 10px
設(shè)置其寬度為10像素,height: 100%
設(shè)置其高度為瀏覽器窗口高度的100%,background-color: #f0f0f0
設(shè)置其背景顏色為灰色,z-index: 999
設(shè)置其堆疊順序為***高。
需要注意的是,如果頁面內(nèi)容較少,滾動條可能不會出現(xiàn),這時可以通過設(shè)置容器元素的***小高度來強制顯示滾動條。
.scrollbar-container { min-height: 200px; }
上述代碼中,.scrollbar-container
的***小高度設(shè)置為200像素,即使頁面內(nèi)容較少,滾動條也會顯示出來。