即使用戶沒有滾動內容,我也想讓滾動條變得可見。
這是代碼:
div{
width:200px;
height:200px;
overflow:scroll;
}
div::-webkit-scrollbar{
visibility: visible;
}
<div>Wikipedia is an online free-content encyclopedia project helping create a world in which everyone can freely share in the sum of all knowledge. It is supported by the Wikimedia Foundation and is based on a model of freely editable content. The name "Wikipedia" is a blending of the words wiki (a technology for creating collaborative websites, from the Hawaiian word wiki, meaning "quick") and encyclopedia. Wikipedia's articles provide links designed to guide the user to related pages with additional information.</div>
我嘗試設定visibility: visible;使滾動條在滾動時仍然可見,但似乎不起作用。
有什么辦法可以做到嗎?
如果沒有,我可以通過自定義滾動條使其可見嗎?
uj5u.com熱心網友回復:
通常,您可以設定html, body { overflow-y: scroll;}此頁面是否已在正文中包含可滾動內容,并且它會顯示。但是,這不適用于頁面上沒有其他內容的包含 div。
在這種情況下,我將為 div 設定個性化滾動條的樣式,使其始終可見。這些樣式適用于標準滾動條,但您可以根據需要對其進行自定義。
div {
width: 200px;
height: 200px;
overflow-y: scroll;
}
div::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
div::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
<div>Wikipedia is an online free content encyclopedia project helping create a world in which everyone can freely share in the sum of all knowledge. It is supported by the Wikimedia Foundation and based on a model of freely editable content. The name "Wikipedia"
is a blending of the words wiki (a technology for creating collaborative websites, from the Hawaiian word wiki, meaning "quick") and encyclopedia. Wikipedia's articles provide links designed to guide the user to related pages with additional information.</div>
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/396367.html
上一篇:需要僅使用css完成半拱覆寫
