自定义滚动条样式-transition无效

Posted dh-dh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自定义滚动条样式-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;
}
.class.hide::-webkit-scrollbar{
    opacity: 0;
}

需要在touch事件触发2s后给container加上.hide的class。为了实现过渡效果,我加了transition: all 1s。然而并没有用

stackoverflow上也有相关提问 https://stackoverflow.com/questions/19230289/use-transition-on-webkit-scrollbar

解决

事实证明,scrollbar上面是不允许用transition的。
Short answer: No, it‘s not possible to use transition on a ::-webkit-scrollbar

不过网友给了很多hack方案。
我下面介绍一种。如果不想听可以直接看例子:https://codepen.io/waterplea/pen/dVMopv

解决原理

简单来说就是在元素上加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;
}
.class.hide {
    color: transparent!important;
}

如果该元素有文字咋办?
我们用该元素的color属性做滚动条的颜色,那该元素的字体就要换个了。

.class {
 text-shadow: 0 0 #fff;
}

用text-shadow指定字体颜色。

over!





以上是关于自定义滚动条样式-transition无效的主要内容,如果未能解决你的问题,请参考以下文章

css代码怎样改变火狐浏览器中滚动条样式

css代码怎样改变火狐浏览器中滚动条样式

WPF中使用WebBrowser控件,怎么自定义它的滚动条样式

如何自己实现一个滚动条,自定义滚动条样式

WPF 自定义滚动条(ScrollViewScrollBar)样式

自定义滚动条样式