该滚动条样式一般适用于移动端，PC端一般考虑兼容性会用到类似nicescroll插件。
实现代码如下：
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: .08rem;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
background-color: #ffe44f;
}
原创文章，作者：犀牛前端部落，如若转载，请注明出处：https://www.pipipi.net/2575.html
犀牛前端部落 相关推荐
-
移动web开发中，max-width和max-device-width有什么不同
max-width 是目标显示区域的宽度，例如浏览器。 max-device-width 是设备整个显示屏幕的宽度，例如设备屏幕。 类似的还有：max-height and max…
-
CSS实现渐变边框（border）
假如你想让元素周围有渐变的边框，我的想法是这样的： 没有可以直接使用的CSS API 我们需要制作一个具有线性渐变背景的包裹（wrapper）元素，然后一个内部元素将遮盖该背景的大…
-
在项目中使用iconfont教程
iconfont介绍 iconfont是阿里巴巴推出的矢量图标库，我们可以很方便的在自己的项目中使用它。 上面有很多很好用的图标，即使我们没有设计经验，也可以按照官方推荐的图标库，…
-
CSS选择器总结，属性继承总结
今天俺跟大家分享一下常见的CSS选择器，以及关于CSS常见的属性继承的总结。 选择器 通配符 id class 标签 后代选择器 子选择器 兄弟选择器 属性选择器 伪类选择器 伪元…
-
CSS3常见技巧（二）：如何用CSS3来实现三角形？
如何使用CSS3来画一个三角形经常令人非常感到困惑，其实原理上是宽度相等的边距以45度来连接。 首先看第一个图 这个是正常情况下，如果我们这个时候把顶部的边距设为none的话就会显…
-
CSS3教程text-shadow+animation实现文字抖动效果
text-shadow是CSS3的一个属性，可以为字体添加阴影效果，减少了图片的使用 基础说明 text-shadow: X轴 Y轴 blur color; 四个参数分别为X轴、Y…
-
CSS3常见技巧（一）：如何禁止文本选择高亮
根据 Can I use显示，目前user-select已经支持绝大多数浏览器了，不过如果想在IE9或者更早之前使用，还需要使用浏览器前缀。 代码如下 . noselect{ -w…
-
CSS:z-index属性没有作用不覆盖详解
z-index 属性只作用在 position 属性值不为static上。案例代码： position: absolute;, position: relative;, or po…
-
CSS translate3d()函数
CSS translate3d()函数用于在三维空间中移动元素。 translate3d()函数的工作原理如下: 它沿着x轴、y轴和z轴按提供的数量移动元素的位置。 沿x轴移动(水…
-
如何使用CSS媒体查询检测设备方向
使用CSS检测设备方向的代码如下: @media screen and (orientation:portrait) { … } @media screen and (orient…
