热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

开发笔记:更改网页内滚动条效果

篇首语:本文由编程笔记#小编为大家整理,主要介绍了更改网页内滚动条效果相关的知识,希望对你有一定的参考价值。

篇首语:本文由编程笔记#小编为大家整理,主要介绍了更改网页内滚动条效果相关的知识,希望对你有一定的参考价值。



/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 9px;
height: 9px
}
/*定义滚动条轨道*/
::-webkit-scrollbar-track {
background-color: transparent;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
background-color: #0093ff;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, transparent 75%, transparent);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em
}

本站点应用的滚动条样式即为上述描写,将上述css代码块复制到对应站点里应用即可。


推荐阅读
author-avatar
bw32dts
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有