利用CSS美化浏览器滚动条,可以自定义颜色和效果


实际上美化滚动条并不是很新鲜,甚至百度一下都有很多文章,但是大部分都是利用jquey进行完成的,我也一直搞不懂为什么不适用更简单的CSS呢?所以,今天我就给大家带来了一个我自己用css美化完成的滚动条。

由于截图不是很方便,所以我这里就不进行截图了,也不用演示了,就一个滚动条,大家喜欢的直接复制代码测试就好了,复制到自己的CSS文件内即可。其实说白了,就是改动一下颜色罢了。但是如果使用jquey可以实现更多的特效动画。

代码部分

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

/* 滚动条的背景颜色 */
::-webkit-scrollbar-track {
    background-color: #f2f2f2;
}

/* 滑块部分颜色 */
::-webkit-scrollbar-thumb {
    background-color: #ff7e80;
    border-radius: 5px;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
}

/* 纵横滚动条交错点颜色 */
::-webkit-scrollbar-corner {
    background-color: black;
}

具体的样式可以参考本站右侧的滚动条,也可能网站已经进行改版你看不到了!改版之前可以看到~



版权声明

本文作者 软软软三岁哟 / 文章来源: 少司命个人博客

本文链接https://www.shaosiming.net/jskz/html5css3/16.html

转载分享:如果你要转载或者分享本篇文章,请注明作者/出处以及原文链接即可!

侵权行为:如果文章内容侵犯了您的权益,还请麻烦来信告知删除内容。


发表评论

检测到您还未登录,需要登录后才能发表评论!

注册 or 登录

文章评论 0 条评论,你也快来参与吧!

还没有评论呢~快来一鸣惊人吧!

博主业务范围

- Job requirements accepted by bloggers -

img

- 网站建设 -

提供一站式建站服务
服务器/域名/程序/备案全包

联系博主
img

- 布局调整 -

优化CSS构架布局
主要针对前端页面美化

联系博主
img

- 模板制作 -

图转HTML/仿站/原创
支持套入市场主流程序

联系博主
img

- 定制服务 -

提供私人专项定制服务
疑难杂症问题解决

联系博主