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

朱雀 2022-04-17 07:12 533阅读 0赞

**问题**  
需求是自定义滚动条样式，然后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。然而并没有用

**解决**  
事实证明，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;
    }
    .class.hide {
        color: transparent!important;
    }

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

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

用text-shadow指定字体颜色。

发表评论取消回复

表情：

评论列表（有 0 条评论，533人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3自定义滚动条样式

自定义滚动条实现此部分针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式，详情如下：滚动条组成部分 1. ::-webkit-scrollbar 滚动

心已赠人/ 2023年06月15日 11:06/ 0 赞/ 8 阅读

相关 Qt 自定义滚动条样式

　　今天是时候把软件中的进度条给美化美化了，最初的想法就是仿照QQ。先前的进度条是这样![11163913-081132ea578649779a333310e

傷城~/ 2022年08月04日 04:18/ 0 赞/ 314 阅读

相关 CSS3自定义滚动条的样式

webkit浏览器是如何自定义滚动条的呢？滚动条demo(只在谷歌浏览器中有效)： demo1：[演示一][Link 1] demo2:[演示二][L

偏执的太偏执、/ 2022年06月16日 08:09/ 0 赞/ 327 阅读

相关 css自定义滚动条样式

代码 css自定义滚动条样式，webkit内核浏览器。 / 滚动条样式 / ::-webkit-scrollbar { / 滚动条的宽度 / width

偏执的太偏执、/ 2022年05月25日 11:05/ 0 赞/ 295 阅读

相关自定义浏览器滚动条样式

感谢刘洋的分享[https://www.lyblog.net/detail/314.html][https_www.lyblog.net_detail_314.html]

我不是女神ヾ/ 2022年05月20日 06:27/ 0 赞/ 403 阅读

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

问题需求是自定义滚动条样式，然后2秒内无操作隐藏滚动条。 2s内隐藏比较麻烦，不能用css实现，只能监听容器的touch事件，然后给滚动条加个opacity: 0的cl

朱雀/ 2022年04月17日 07:12/ 0 赞/ 534 阅读

相关自定义滚动条样式

/ 滚动条的宽度 / ::-webkit-scrollbar { width: 7px; height: 7px; }

迷南。/ 2022年02月26日 09:35/ 0 赞/ 386 阅读

相关自定义滚动条样式

::-webkit-scrollbar //滚动条整体部分 ::-webkit-scrollbar-button //滚动条两端的按钮 ::-webkit-scroll

骑猪看日落/ 2022年01月14日 13:17/ 0 赞/ 429 阅读

相关修改浏览器默认滚动条样式及自定义盒子滚动条样式

默认浏览器滚动条样式 //默认滚动条样式 ::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设

迷南。/ 2021年09月24日 11:30/ 0 赞/ 665 阅读

相关 CSS - 使用css自定义滚动条样式

使用css自定义滚动条样式一. 隐藏滚动条二. 修改滚动条样式 Chrome（WebKit的浏览器） IE浏览器一. 隐藏

以你之姓@/ 2021年07月26日 01:49/ 0 赞/ 590 阅读