問題
需求是自定義滾動條樣式，然後2秒內無操作隱藏滾動條。
2s內隱藏比較麻煩，不能用css實現，只能監聽容器的touch事件，然後給滾動條加個opacity: 0的class。
.class::-webkit-scrollbar
.class::-webkit-scrollbar-thumb
.class.hide::-webkit-scrollbar
解決
事實證明，scrollbar上面是不允許用transition的。
short answer: no, it』s not possible to use transition on a ::-webkit-scrollbar
解決原理
簡單來說就是在元素上加transition，而不是在scrollbar偽類上。
利用-webkit-scrollbar-thumb的color繼承自該元素，該元素transition color的時候，滾動條的color也會transition。剩下的就是用color實現乙個滾動條了。
.class::-webkit-scrollbar-thumb
.class
.class.hide
我們用該元素的color屬性做滾動條的顏色，那該元素的字型就要換個了。
.class自定義滾動條樣式
webkit scrollbar 滾動條整體部分 webkit scrollbar button 滾動條兩端的按鈕 webkit scrollbar track 外層軌道 webkit scrollbar track piece 內層軌道，滾動條中間部分 除去 webkit scrollbar th...
自定義滾動條樣式
乙個完整滾動條右以下部分組成 webkit scrollbar 滾動條整體部分，常用屬性 width,height,background,border webkit scrollbar button 滾動條兩邊的按鈕，預設不設定時不顯示，可設定高度 背景色 背景 webkit scrollbar t...
自定義滾動條的樣式
class class content lorem ipsum dolor sit amet,consectetur adipisicing elit.nulla vitae modi rerum natus numquam id ut harum aperiam.aliquid illo ad e...