uniapp以及微信小程式中scroll-view隱藏滾動條 自定義滾動條
阿新 • • 發佈:2021-10-19
隱藏滾動條
1、全域性隱藏滾動條,在app.vue中
::-webkit-scrollbar{
display: none;
}
2、區域性隱藏藏滾動條
樣式沒有使用scoped屬性時, 否則無效。
.uni-scroll-view::-webkit-scrollbar { display: none }
使用scoped屬性時, 就要使用/deep/穿透。
/deep/.uni-scroll-view::-webkit-scrollbar { display: none }
自定義滾動條
/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/ ::-webkit-scrollbar { width: 16upx!important; height: 16upx!important; background-color: #F5F5F5; } /*定義滾動條軌道 內陰影+圓角*/ ::-webkit-scrollbar-track { // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #fff; } /*定義滑塊 內陰影+圓角*/ ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555; }
滾動條詳解
上圖位置<1>:-webkit-scrollbar 滾動條整體部分。
上圖位置<2>:-webkit-scrollbar-button 滾動條的軌道的兩端按鈕,允許通過點選微調小方塊的位置。
上圖位置<3>:-webkit-scrollbar-corner 邊角,即兩個滾動條的交匯處。
上圖位置<4>:-webkit-scrollbar-thumb 滾動條裡面的小方塊,能向上向下移動(或往左往右移動,取決於是垂直滾動條還是水平滾動條)。
上圖位置<5>:-webkit-scrollbar-track 滾動條的軌道(裡面裝有thumb)。
上圖位置<6>:-webkit-scrollbar-track-piece 內層軌道,滾動條中間部分(除去)。
參考連結:https://www.cnblogs.com/lizhao123/p/12539596.html
參考連結:https://blog.csdn.net/qq_32067045/article/details/79958540