Linux 拨号vps windows公众号手机端

CSS如何设置滚动条样式

lewis 6年前 (2019-01-28) 阅读数 9 #程序编程
文章标签 css

要设置滚动条的样式,可以使用CSS的::-webkit-scrollbar伪元素来进行样式设置。下面是一个示例:

/* 设置滚动条的宽度和高度 */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* 设置滚动条的背景颜色 */
::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
/* 设置滚动条滑块的颜色 */
::-webkit-scrollbar-thumb {
background-color: #888;
}
/* 当鼠标悬停在滚动条上时,设置滚动条滑块的颜色 */
::-webkit-scrollbar-thumb:hover {
background-color: #555;
}

这段代码中,::-webkit-scrollbar用于设置滚动条的宽度和高度。::-webkit-scrollbar-track用于设置滚动条的背景颜色,::-webkit-scrollbar-thumb用于设置滚动条滑块的颜色。::-webkit-scrollbar-thumb:hover用于设置鼠标悬停在滚动条上时滑块的颜色。

请注意,这段代码只适用于使用Webkit内核的浏览器,如Chrome和Safari。对于其他浏览器,可能需要使用不同的样式规则。

版权声明

本文仅代表作者观点,不代表米安网络立场。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门