问题

需求是自定义滚动条样式,然后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无效的更多相关文章

  1. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  2. WPF 自定义滚动条样式

    先看一下效果: 先分析一下滚动条有哪儿几部分组成: 滚动条总共有五部分组成: 两端的箭头按钮,实际类型为RepeatButton Thumb 两端的空白,实际也是RepeatButton 最后就是Th ...

  3. CSS3自定义滚动条样式

    原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...

  4. CSS自定义滚动条样式

    原文地址:http://www.qianduan.net/css-custom-scroll-bar-style/ 相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器 ...

  5. css中渐变的分割线和自定义滚动条样式

    css中渐变的分隔线: <div style="background:linear-gradient(to left,#efefef,#b6b6b6,#efefef);height:1 ...

  6. 滚动条样式优化(CSS3自定义滚动条样式 -webkit-scrollbar)

    有时候觉得浏览器自带的原始滚动条不是很美观,那webkit浏览器是如何自定义滚动条的呢? Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼 ...

  7. CSS3自定义滚动条样式 -webkit-scrollbar(转)

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  8. CSS3自定义滚动条样式 -webkit-scrollbar

    今天写项目碰上需要改滚动条效果,我的第一反应是,需要用js写滚动条,顿时头大,上网搜了一下,原来css3就可以修改滚动条样式了,非常好啊,下面分享原文地址:http://www.xuanfengge. ...

  9. 使用css实现无滚动条滚动+使用插件自定义滚动条样式

    使用css实现无滚动条滚动,摘抄自:曹小萌博客 使用css实现无滚动条滚动,大体思路是在div外面再套一个div.这个div设置overflow:hidden.而内容div设置 overflow-x: ...

随机推荐

  1. Error fetching https://gems.ruby-china.org/: bad response Not Found 404 (https://gems.ruby-china.org/specs.4.8.gz) 报错解决办法

    执行换源操作 gem source -a https://gems.ruby-china.org/ 时报错: Error fetching https://gems.ruby-china.org/: ...

  2. [转]当CPU飙高时,它在做什么

    在开发过程中,有时候我们发现JVM占用的CPU居高不下,跟我们的预期不符,这时,CPU在做什么呢?是什么线程让CPU如此忙碌呢?我们通过如下几步,可以查看CPU在执行什么线程. 1.查找jvm进程ID ...

  3. .net 笔试面试总结(3)

    什么是Sql注入?如何避免Sql注入? 用户根据系统的程序构造非法的参数从而导致程序执行不是程序期望的恶意Sql语句. 使用参数化的Sql就可以避免Sql注入. 数据库三范式是什么? 第一范式:字段不 ...

  4. 关于elementui表单数字校验踩坑记

    需求:1.输入类型是数字.2.数字大小有限制.3.非必填 做法: <el-form-item label="熟悉程度" prop="averageCaseRunTi ...

  5. Linux系统上Nginx服务器的安装与配置

    前言: 详细步骤移步菜鸟教程 一. 安装Nginx,注意虚拟机与宿主机的网络连通性 l  安装编译工具及库文件(zlib库. ssl) yum -y install make zlib zlib-de ...

  6. 打造实时数据集成平台——DataPipeline基于Kafka Connect的应用实践

    导读:传统ETL方案让企业难以承受数据集成之重,基于Kafka Connect构建的新型实时数据集成平台被寄予厚望. 在4月21日的Kafka Beijing Meetup第四场活动上,DataPip ...

  7. SQLserver数据库反编译生成Hibernate实体类和映射文件

    一.建立项目和sqlserver数据库 eclipse,我使用的版本是neon3 二.Data Source Explorer 选择OK 在data source Explorer的Database ...

  8. 导入虚拟机vmware,此主机支持Intel VT-x,但Intel VT-x处于禁用状态和黑屏

    解决方法:进入BIOS(按什么键进入bios,需要看你用什么电脑),把Intel Virtualization Technology         设置enabled 然后是黑屏解决方法:管理员模式 ...

  9. 【不定期更新】FPGA/IC岗位常见笔试面试题总结(基础知识)

    1 数字IC(ASIC)设计流程: IC设计分为前端和后端.前端设计主要将HDL语言-->网表,后端设计是网表-->芯片版图. 前端主要有需求分析与架构设计.RTL设计.仿真验证.逻辑综合 ...

  10. pwnable.kr input解题记录

    pwnable input解题记录 给了源码如下: #include "stdio.h" #include "unistd.h" #include " ...