需求:使列表内容在规定的区域内滚动,并且隐藏滚动条。
一、列表竖直滚动。
思路:
1.给外部盒子设定固定高度,宽度根据实际情况设定。
2.x轴禁止滚动,y轴滚动。
3.隐藏滚动条
实现结果:
解决过程:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.content {
margin: 0 auto;
/* 自定义宽度大小 */
width: 300px;
/* 必须设定滚动部分的高度 */
height: 300px;
background-color: pink;
/*x轴禁止滚动*/
overflow-x: hidden;
/*y轴滚动*/
overflow-y: scroll;
}
.content::-webkit-scrollbar {
/*隐藏滚动条*/
display: none;
}
.item {
margin-bottom: 30px;
color: aqua;
font-size: 16px;
}
</style>
</head>
<body>
<div class="content">
<div class="item">这是第一行</div>
<div class="item">这是第二行</div>
<div class="item">这是第三行</div>
<div class="item">这是第四行</div>
<div class="item">这是第六行</div>
<div class="item">这是第七行</div>
<div class="item">这是第八行</div>
<div class="item">这是第九行</div>
<div class="item">这是第十行</div>
</div>
</body>
</html>