2023年6月20日发(作者：)

⾃定义滚动条样式-transition⽆效问题需求是⾃定义滚动条样式，然后2秒内⽆操作隐藏滚动条。2s内隐藏⽐较⿇烦，不能⽤css实现，只能监听容器的touch事件，然后给滚动条加个opacity: 0的class。.class::-webkit-scrollbar{ width: 10px; -webkit-transition: all 1s; transition: all 1s;}.class::-webkit-scrollbar-thumb{ border-radius: 5px; background-color: gray;}.::-webkit-scrollbar{ opacity: 0;}需要在touch事件触发2s后给container加上.hide的class。为了实现过渡效果，我加了transition: all 1s。然⽽并没有⽤解决事实证明，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{ border-radius: 5px; box-shadow: inset 0 0 0 5px; // ⽤box-shadow模拟滚动条}.class { -webkit-transition: all 1s; transition: all 1s;}. { color: transparent!important;}如果该元素有⽂字咋办？我们⽤该元素的color属性做滚动条的颜⾊，那该元素的字体就要换个了。.class { text-shadow: 0 0 #fff;}⽤text-shadow指定字体颜⾊。

2023年6月20日发(作者：)

⾃定义滚动条样式-transition⽆效问题需求是⾃定义滚动条样式，然后2秒内⽆操作隐藏滚动条。2s内隐藏⽐较⿇烦，不能⽤css实现，只能监听容器的touch事件，然后给滚动条加个opacity: 0的class。.class::-webkit-scrollbar{ width: 10px; -webkit-transition: all 1s; transition: all 1s;}.class::-webkit-scrollbar-thumb{ border-radius: 5px; background-color: gray;}.::-webkit-scrollbar{ opacity: 0;}需要在touch事件触发2s后给container加上.hide的class。为了实现过渡效果，我加了transition: all 1s。然⽽并没有⽤解决事实证明，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{ border-radius: 5px; box-shadow: inset 0 0 0 5px; // ⽤box-shadow模拟滚动条}.class { -webkit-transition: all 1s; transition: all 1s;}. { color: transparent!important;}如果该元素有⽂字咋办？我们⽤该元素的color属性做滚动条的颜⾊，那该元素的字体就要换个了。.class { text-shadow: 0 0 #fff;}⽤text-shadow指定字体颜⾊。