css滾動條樣式程式碼
- IT科技
- 關注:1.49W次
在現在的絕大部分專案中很多都會用到滾動條,有時候用會到模擬的滾動條或css滾動條,比較常見的就是css滾動條,並且在所有瀏覽器,滾動條可定製性較強的應該是webkit核心的瀏覽器。
在webkit下面的CSS設定滾動條主要是有7個屬性,具體介紹如下:
1、::-webkit-scrollbar 滾動條整體部分,能夠設定寬度等
2、::-webkit-scrollbar-button 滾動條兩端的按鈕
3、::-webkit-scrollbar-track 外層軌道
4、::-webkit-scrollbar-track-piece 內層滾動槽
5、::-webkit-scrollbar-thumb 滾動的滑塊
6、::-webkit-scrollbar-corner 邊角
7、::-webkit-resizer 定義右下角拖動塊的樣式
參考範例:
css滾動條樣式程式碼如下:
li {
width: 260px;
height: 370px;
border: 1px solid #D9D9D9;
overflow-y: scroll;
&::-webkit-scrollbar {
width: 3px;
}
&::-webkit-scrollbar-thumb {
background: #d8d8d8;
border-radius: 10px;
}
&::-webkit-scrollbar-track-piece {
background: transparent;
}
}
- 文章版權屬於文章作者所有,轉載請註明 https://shqsg.com/dianzi/mor135.html