各位、先看下第一個(gè)實(shí)現(xiàn)效果
產(chǎn)品經(jīng)理：這個(gè)不好看，換一個(gè)
我：好看舅踪，再說不好看我要拔刀了
實(shí)現(xiàn)代碼
-
HTML
<div class="test test-1"> <div class="scrollbar"></div> </div> -
CSS
.test { width : 50px; height : 200px; overflow: auto; float : left; margin : 5px; border : none; } .scrollbar { width : 30px; height: 300px; margin: 0 auto; } .test-1::-webkit-scrollbar { /*滾動(dòng)條整體樣式*/ width : 10px; /*高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸*/ height: 1px; } .test-1::-webkit-scrollbar-thumb { /*滾動(dòng)條里面小方塊*/ border-radius: 10px; box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); background : #535353; } .test-1::-webkit-scrollbar-track { /*滾動(dòng)條里面軌道*/ box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 10px; background : #ededed; }
產(chǎn)品經(jīng)理：我有槍??
我：馬上改抚岗，您看這是第二個(gè)樣子
實(shí)現(xiàn)代碼
-
HTML
<div class="test test-5"> <div class="scrollbar"></div> </div> -
CSS
.test-5::-webkit-scrollbar { /*滾動(dòng)條整體樣式*/ width : 10px; /*高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸*/ height: 1px; } .test-5::-webkit-scrollbar-thumb { /*滾動(dòng)條里面小方塊*/ border-radius : 10px; background-color: skyblue; background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent ); } .test-5::-webkit-scrollbar-track { /*滾動(dòng)條里面軌道*/ box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); background : #ededed; border-radius: 10px; }
產(chǎn)品經(jīng)理：這個(gè)還可以雇庙，晚上給你加個(gè)雞腿瞧甩，好好加班
我：****。
順便在這元宵佳節(jié)弥鹦，祝各位節(jié)日快樂??????
這里卿洋
愿喜??
