HTML＋CSS實現大盒子在小盒子的展示范圍內進行滾動展示
１.效果展示：
2.主要代碼:樣式: overflow:auto;
3.如果想要消除對應的滾動條:
.out::-webkit-scrollbar{
display: none;
}
4.創建對應的盒子(div)配置對應的樣式:
源代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rowspeed</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.out{
position: absolute;
left: 200px;
top: 100px;
width: 300px;
height:250px;
background: skyblue;
overflow: auto; /*實現代碼所在位置*/
}
.conten{
position: absolute;
display: flex;
justify-content: space-around;
width: 550px;
height: 200px;
background: lightseagreen;
}
.conten>div{
width: 100px;
height: 100%;
background: yellow;
}
/*消除滾動條,消除的時候PC電腦端可以通過按下鼠標的滾輪進行左右滑動,或者筆記本電腦雙指同時拖動*/
/*out::-webkit-scrollbar{
display: none;
}*/
</style>
</head>
<body>
<div class="out">
<div class="conten">
<div>11</div>
<div>22</div>
<div>33</div>
<div>44</div>
<div>55</div>
</div>
</div>
</body>
</script>
</html>
