div超出部分出现滚动条并修改滚动条的默认样式

最新推荐文章于 2024-05-10 12:33:21 发布

weixin_zsh

最新推荐文章于 2024-05-10 12:33:21 发布

阅读量6.4k

点赞数 5

分类专栏：样式文章标签：滚动条样式 scroll

本文链接：https://blog.csdn.net/weixin_41863239/article/details/85336151

版权

样式专栏收录该内容

6 篇文章 0 订阅

订阅专栏

使用overflow的属性 auto 和scroll 可以在内容超出的时候出现滚动条。

overflow	设置包括水平和竖直方向内容溢出时的操作
overflow-x	设置水平方向内容溢出时的操作
overflow-y	设置竖直方向内容溢出时的操作

这里以overflow-y为例

overflow-y的值有一下几种：

其中前四种主流浏览器都支持，后两种no-display和no-content 目前没有浏览器支持。所以这里只测试了前四个属性值。

这是一个小demo，分别测试了visible,auto,hidden,scroll：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		ul li{
			width:200px;
			height: 50px;
			float: left;
			margin-right: 10px;
			list-style: none;
			text-align: left;
		}
		.scr{
			clear: both;
		}
		.scrollcontainer{
			border:4px solid #146C68;
			width:200px;
			height: 200px;
			overflow-y:visible;
			float: left;
			margin-right: 10px;
		}
		.scrollcontainer_auto{
			overflow-y:auto;
		}
		.scrollcontainer_hide{
			overflow-y:hidden;
		}
		.scrollcontainer_scroll{
			overflow-y:scroll;
		}
	</style>
</head>
<body>
	 <ul>
	 	<li>默认 visible</li>
	 	<li>自动 auto</li>
	 	<li>超出隐藏 hidden</li>
	 	<li>超出出现滚动条 scroll</li>
	 </ul>
	 <br/>
	<div class="scr">
		<div class="scrollcontainer">
			我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。
		</div>
		<div class="scrollcontainer scrollcontainer_auto">
			我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。
		</div>
		<div class="scrollcontainer scrollcontainer_hide">
			我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。
		</div>
		<div class="scrollcontainer scrollcontainer_scroll">
			我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。
		</div>
	</div>
</body>
</html>

运行之后效果如下：

通常情况下，只要设置overflow-y:auto,就可以实现内容超出时出现滚动条，没有超出时没有滚动条的功能！

下面介绍改变滚动条默认样式的方法,采用的auto，主要用到的滚动条的属性有

::-webkit-scrollbar	设置滚动条整体宽度
::-webkit-scrollbar-track	设置滚动条的轨道的样式
::-webkit-scrollbar-thumb	设置滚动条的滑块的样式

这是一个小demo：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.scrollcontainer{
			border:4px solid #146C68;
			width:200px;
			height: 200px;
			overflow-y:visible;
			float: left;
			margin-right: 10px;
		}
		.scrollcontainer_auto{
			overflow-y:auto;
		}
		/*滚动条整体宽度*/
		.scrollcontainer_auto::-webkit-scrollbar{
			 width: 20px;     /*宽对应滚动条的尺寸*/
		}
		/*轨道*/
		.scrollcontainer_auto::-webkit-scrollbar-track{
                        background: yellow;
		}
		/*滑块*/
		.scrollcontainer_auto::-webkit-scrollbar-thumb{
			border-radius: 5px;
                        background: red;
		}
		
	</style>
</head>
<body>
	<div class="scrollcontainer scrollcontainer_auto">
		我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。我是内容，是很长的内容。
	</div>
</body>
</html>

运行之后效果如下：

虽然配色有点西红柿炒鸡蛋，但是对比明显！

weixin_zsh

关注

5
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
div超出部分出现滚动条并修改滚动条的默认样式

使用overflow的属性 auto 和scroll 可以在内容超出的时候出现滚动条。overflow 设置包括水平和竖直方向内容溢出时的操作 overflow-x 设置水平方向内容溢出时的操作 overflow-y 设置竖直方向内容溢出时的操作这里以overflow-y为例overflow-y的值有一下几种：其中前四种主流浏览器...
复制链接

扫一扫