CSS实现列表滚动效果

小猫娃来啦

已于 2023-03-10 10:23:38 修改

阅读量3.9k

点赞数 4

分类专栏： css 文章标签： css 前端 html

于 2022-12-06 13:32:52 首次发布

本文链接：https://blog.csdn.net/dyk11111/article/details/128200011

版权

css 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

效果：

应用场景：

1. 一个竖向列表（或横向列表）中有很多行，但是随着页面上下（或左右）滑动，整个列表会随之移动。

2.三级联动菜单，上下滑动的时候。

诸如此类...

在这里介绍一个css属性，overflow-y和overflow-x

以以下代码为例：

<!DOCTYPE html>
<html>
	<head>
		<style>
			div{
				height: 450px;
				overflow-y: scroll;
			}
		</style>
	</head>
	<body>
		<div>
			<p>列表1</p><p>列表2</p><p>列表3</p><p>列表4</p><p>列表5</p><p>列表6</p><p>列表7</p><p>列表8</p><p>列表9</p><p>列表10</p><p>列表11</p><p>列表12</p><p>列表13</p><p>列表14</p><p>列表15</p><p>列表16</p><p>列表17</p><p>列表18</p><p>列表19</p><p>列表20</p><p>列表21</p><p>列表22</p><p>列表23</p><p>列表24</p><p>列表25</p><p>列表26</p><p>列表27</p><p>列表28</p><p>列表29</p><p>列表30</p>
		</div>
	</body>
</html>

关于overflow-y：

当一个块级元素（div 元素、p 元素之类的）的内容在垂直方向发生溢出时，CSS属性 overflow-y决定如何处理溢出的内容。

隐藏溢出内容（hidden），或者显示滚动条（scroll），或者直接显示溢出内容（visible），或者让浏览器来处理（auto）。

关于overflow-x：

当一个块级元素的内容在水平方向发生溢出时，CSS属性 overflow-x 决定应该截断溢出内容，或者显示滚动条，或者直接显示溢出内容。