1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > html滚动条样式自定义 CSS3自定义滚动条样式

html滚动条样式自定义 CSS3自定义滚动条样式

时间:2023-11-26 16:21:22

相关推荐

html滚动条样式自定义 CSS3自定义滚动条样式

CSS3对于滚动条也做了特别支持,可惜目前只有webkit内核的支持比较好,IE支持不完全,详细兼容性请查看/#search=scrollbar。

主要有7个属性:

::-webkit-scrollbar? 滚动条整体部分,可以设置宽度啥的

::-webkit-scrollbar-button? 滚动条两端的按钮

::-webkit-scrollbar-track? ?外层轨道

::-webkit-scrollbar-track-piece? ?内层滚动槽

::-webkit-scrollbar-thumb? 滚动的滑块

::-webkit-scrollbar-corner? 边角

::-webkit-resizer? 定义右下角拖动块的样式

具体所指如图示:

示例:

/*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/

::-webkit-scrollbar {

width: 10px;

height: 10px;

background-color: #f5f5f5;

}

/*定义滚动条的轨道,内阴影及圆角*/

::-webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 6px rgba(45, 62, 80, .3);

border-radius: 10px;

background-color: #f5f5f5;

}

/*定义滑块,内阴影及圆角*/

::-webkit-scrollbar-thumb {

border-radius: 10px;

-webkit-box-shadow: inset 0 0 6px rgba(45, 62, 80, .3);

background: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#2D3E50), to(#2D3E50), color-stop(.6, #129FEA));;

}

/*滑块鼠标悬停样式*/

::-webkit-scrollbar-thumb:hover {

background: #129FEA;

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。