css如何让滚动条样式变好看？默认滚动条样式⽐较丑，长这样：
如何让它变好看呢？可以通过css修改它的样式。
⼀、默认样式
页⾯代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div,p,html,body{
margin: 0;
padding: 0;
}
.content{
width: 100vw;
height: 100vh;
background-color: #000000;
display: flex;
justify-content: center;
align-items: center;
}
section{
width: 300px;
height: 200px;
padding: 10px;
border: 2px solid #DCDCDC;
border-radius: 5px;
}
section .area{
height: 100%;
color: #F0F8FF;
overflow: auto;
}
</style>
</head>
<body>
<div class="content">
<section>
<div class="area">
2021年中国⾦鸡百花电影节将于12⽉28⽇-30⽇在福建省厦门市举办。届时，将举办2021年中国⾦鸡百花电影节开幕式暨第34届中国电影⾦鸡奖提名者表彰仪式、⾦鸡国产电影展、⾦
鸡国际影展和⾹港经典影⽚展、⾦鸡电影论坛及创投⼤会、第34届中国电影⾦鸡奖红毯暨颁
奖典礼等活动。经过初选、初评两个阶段，⽬前已评选产⽣了19个奖项的提名名单（具体提
名名单见相关链接）。《中国医⽣》《守岛⼈》《我和我的家乡》《我的》《⾰命者》
《悬崖之上》⼊围最佳故事⽚，尹⼒、张艺谋、黄建新、郑⼤圣、韩延、路阳将⾓逐最佳导
演奖，于和伟、刘烨、张译、易烊千玺、郭晓东竞争“最佳男主⾓”，刘浩存、刘敏涛、张⼩
斐、张⼦枫中将诞⽣新的“最佳⼥主⾓”。
今天公布的主视觉海报，源⾃于第34届中国电影⾦鸡奖海报设计⼤赛获奖作品，海报中的雄
鸡形象呈现五彩变化。其中，中国红昭⽰建党百年的坚定和炽烈，⽣态绿映衬和谐发展的⽣
机和希望，海天蓝饱含海天⼀⾊的清朗和⼤⽓，荣耀⾦彰显电影强国的梦想和使命，古典墨
散发传统⽂化的⽓质和魅⼒。
</div>
</section>
</div>
</body>
</html>
⼆、修改滚动条样式（Chrome、Safari）
css部分，这⾥的是设置整个页⾯的滚动条样式，若设置某⼀元素的滚动条样式，前⾯加选择器，如
section .area::-webkit-scrollbar{
width:10px;
height:10px;
}
/* 设置滚动条整体，宽⾼ */
::-webkit-scrollbar{
width:10px;
height:10px;
}
/* 设置滚动条的轨道 */
::-webkit-scrollbar-track{
background: #b3b9bc;
border-radius:2px;
}
/* 设置滚动条⾥⾯的⼩⽅块 */
::-webkit-scrollbar-thumb{
background: #0ebfb0;
border-radius:10px;
}
效果：
三、隐藏滚动条（Chrome、Safari、IE10+、Firefox）
1、Chrome、Safari
::-webkit-scrollbar{
width: 0 !important;
}
2、Firefox、IE10+
section .area{
css设置表格滚动条/* Firefox */
overflow: -moz-scrollbars-none;
/* IE 10+ */
-ms-overflow-style: none;
}
四、⿏标移⼊显⽰滚动条
/* 设置滚动条隐藏 */
::-webkit-scrollbar{
width: 0px !important;
}
/* ⿏标移⼊显⽰ */
section .area:hover::-webkit-scrollbar{
width: 10px !important;
height: 10px !important;
}
效果是这样的，⿏标移⼊前：
⿏标移⼊后：
会发现⽂字内容宽度被滚动条占据⼀部分，效果不好，解决⽅法：
section .area{
/* 和滚动条宽度保持⼀致 */
padding-right: 10px;
}
section .area:hover{
padding-right: 0px;
color: #0EBFB0;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。