欢迎光临
我们一直在努力
扫描二维码在手机上浏览
网站制作

CSS 修改网站滚动条样式

网站滚动条可以根据自己喜好修改样式。在所有浏览器中,滚动条可定制性最强的当属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了吧。

THE END
历史上的今天
五月
1
    哇哦~~~,历史上的今天没发表过文章哦
标签
喜欢就支持一下吧!!!
点赞1打赏分享
版权声明
本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动。
转载请注明:文章转载自:灵阳星空 » CSS 修改网站滚动条样式
本文标题:CSS 修改网站滚动条样式
本文日期:本文发表于 2020/05/01 10:15:36,最后更新于 2020/05/01 10:15:36,如内容失效,请反馈给我们,谢谢!
本文地址: https://www.jsksky.com/css-modifying-website-scroll-bar-style.html

网络臭虫

已发布508篇文章
吃得苦中苦,方为人上人,不卧薪藏胆,哪能苦尽甘来?点击进入我的网站了解更多有关我的信息。

评论 抢沙发

A 作者 M 管理员

评论前必须登录!

 


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏