网站滚动条可以根据自己喜好修改样式。在所有浏览器中,滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因,市面上基于webkit内核的浏览器也是很难穷举完。例如:Google Chrome、Opera、360极速浏览器,猎豹浏览器等,搜狗浏览器等。
直接上代码:
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-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
}
样式随自己喜好改就行,由于是基于webkit内核的,因此只有webkit内核的浏览器才支持该样式显示,IE浏览器不兼容,不过这年头应该也没人用IE了吧。
评论前必须登录!
注册
社交帐号登录