css下拉滚动条调宽度
导读:CSS下拉滚动条的宽度是一个和美观相关的问题,如何让下拉滚动条的宽度更合适呢?下面我们就来介绍一下如何设置CSS下拉滚动条的宽度。<style>/* 设置::-webkit-scrollbar为webkit内核浏览器下的滚动条样...
CSS下拉滚动条的宽度是一个和美观相关的问题,如何让下拉滚动条的宽度更合适呢?下面我们就来介绍一下如何设置CSS下拉滚动条的宽度。
style>
/* 设置::-webkit-scrollbar为webkit内核浏览器下的滚动条样式 */::-webkit-scrollbar{
width: 8px;
/* 设置滚动条的宽度 */height: 8px;
/* 设置滚动条的高度 */}
/* 设置::-webkit-scrollbar-thumb为webkit内核浏览器下的滚动条拖动部分的样式 */::-webkit-scrollbar-thumb{
background: #666;
/* 设置滚动条拖动部分的背景色 */}
/* 设置::-webkit-scrollbar-track为webkit内核浏览器下的滚动条轨道部分的样式 */::-webkit-scrollbar-track{
background: #f2f2f2;
/* 设置滚动条轨道部分的背景色 */}
/* 在其他浏览器下设置滚动条样式 */html{
scrollbar-width: thin;
/* 设置滚动条宽度为thin */}
body::-webkit-scrollbar-thumb{
border-radius: 3px;
/* 设置滚动条拖动部分的圆角 */}
/style>
如上代码所示,我们可以通过设置“::-webkit-scrollbar”来设置webkit内核浏览器下的滚动条样式,也可以通过在其他浏览器下设置滚动条样式。
你还可以根据需要来调整滚动条的宽度、高度和背景色等样式属性,让滚动条更符合你的需求。
希望本文对你有所帮助,谢谢阅读!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: css下拉滚动条调宽度
本文地址: https://pptw.com/jishu/500263.html
