本文作者:心月

css默认滚动条样式自定义改造

心月IT博客 2019-09-30
css默认滚动条样式自定义改造摘要:css默认的滚动条样式确实太丑了,想不想自定义这个滚动条的样式呢?知道了滚动条的相关属性,改造起来就非常方便了,可以想怎么改就怎么改。

        css默认的滚动条样式确实太丑了,想不想自定义这个滚动条的样式呢?滚动条样式的相关属性:

滚动条整体样式:-webkit-scrollbar

滚动条里面小方块样式:-webkit-scrollbar-thumb

滚动条里面轨道样式:-webkit-scrollbar-track

        知道了滚动条的相关属性,改造起来就非常方便了,可以想怎么改就怎么改。

下面看看博主自己改造的滚动条样式:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>css滚动条样式</title>
<style type="text/css">
.box{width: 600px;height: 400px;margin: 100px auto;border: 4px solid #14f7ee;border-right: 0;box-shadow: 5px 5px 5px #0099ff40;background: #0099ff1f;border-radius: 7px;}
.main{overflow-x: hidden;overflow-y: auto;color: #000;font-size: 16px;height: 100%;}
.main p{height:100px;padding: 10px;}
/*-------滚动条整体样式----*/
.main::-webkit-scrollbar {width:8px;height:8px;}
/*滚动条里面小方块样式*/
.main::-webkit-scrollbar-thumb {border-radius:100px;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);background:#0099ff8a;}
/*滚动条里面轨道样式*/
.main::-webkit-scrollbar-track {-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);border-radius:0;background:rgba(0,0,0,0.1);}
</style>
</head>
<body>
	<div class="box">
		<div class="main">
			<p>心月IT博客</p>
			<p>网站建设</p>
			<p>web前端</p>
			<p>css默认滚动条样式自定义改造</p>
		</div>
	</div>
</body>
</html>

效果图:

自定义滚动条样式效果

特别注意】:实现单个div里面的内容滚动,必需满足以下3个条件:

1、div必须设定固定的高度,不能使用百分比或 auto 等弹性值;

2、其中的内容高度必须超过它本身的高度;

3、必需要添加这个overflow:auto属性。


:overflow的属性和不同值得作用

1.overflow:visible;不剪切内容也不添加滚动条。默认值。使用该值时,无论设置的"width"和"height"的值是多少,其中的内容无论是否超出范围都将被强制显示; 

2.overflow:auto;在需要时剪切内容并添加滚动条;

3.overflow:hidden;不显示超过对象高度的内容;

4.overflow:scroll;总是显示纵向滚动条;

5.overflow 水平及垂直方向内容溢出时的设置;

6.overflow-x 水平方向内容溢出时的设置; 

7.overflow-y 垂直方向内容溢出时的设置。

文章版权及转载声明:

本文由 心月IT技术博客 博主整理于 2019-09-30
若转载请注明原文及出处:https://www.xinyueseo.com/webfe/341.html

分享到:
赞(
发表评论
快捷输入:

验证码

    评论列表 (有 0 条评论,人围观)参与讨论