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小时内删除。
发表评论