[英]how to make Scroll visible in firefox
我有一個在chrome中可見的滾動條,但它不支持firefox。任何建議。
<div class="item-list">
</div>
.item-list::-webkit-scrollbar {
-webkit-appearance: none;
-moz-appearance:none;
width: 10px;
}
.item-list::-webkit-scrollbar-thumb {
border-radius: 5px;
height: 80px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
編輯CSS,您必須添加-moz-appearance行。 您可以在下面的鏈接中找到詳細信息;
樣品
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars
細節
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
.item-list {
scrollbar-color: rgba(255,255,255,.5);
scrollbar-width: thin;
}
.item-list::-webkit-scrollbar {
-webkit-appearance: none;
-moz-appearance:none;
width: 10px;
}
.item-list::-webkit-scrollbar-thumb {
border-radius: 5px;
height: 80px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
如果你想顯示滾動條,你必須使用min-height css
.insider {min-height:250px; } .item-list { width: 200px; height: 200px; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, 0); } .item-list { scrollbar-color: rgba(255,255,255,.5); scrollbar-width: thin; } .item-list::-webkit-scrollbar { -webkit-appearance: none; -moz-appearance:none; width: 10px; } .item-list::-webkit-scrollbar-thumb { border-radius: 5px; height: 80px; background-color: rgba(0,0,0,.5); -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); }
<div class="item-list"> <div class="insider"> </div> </div>
這篇stackoverflow帖子似乎表明Firefox 64對樣式滾動條的支持有限。 試圖滿足此處概述的CSS滾動條模塊級別1定義的W3C標准。
這“添加了滾動條寬度和滾動條顏色的兩個新屬性,可以控制滾動條的顯示方式。”
我試圖在這個小提琴中給你一個例子,
body { overflow: hidden; } .item-list { width: 200px; height: 200px; background-color: red; overflow: scroll; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, 0); } .content { height: 1000px; } .item-list::-webkit-scrollbar { -webkit-appearance: none; -moz-appearance: none; width: 10px; } .item-list::-webkit-scrollbar-thumb { border-radius: 5px; height: 80px; background-color: rgba(0, 0, 0, .5); -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5); }
<div class="item-list"> <div class="content"> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.