<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>homework</title>
<style>
/*监控滚动条*/
.tv{
overflow-x: auto;
overflow-y: hidden;
color: #000;
height: 365px;
width: 1250px;
font-size: .7rem;
font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,"黑体",Arial,Tahoma;
}
/*滚动条样式*/
.tv::-webkit-scrollbar {/*滚动条整体样式*/
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
height: 4px;
}
.tv::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
.tv::-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);
}
.img{
width: 618px;
height: 363px;
float: left;
position: relative;
display: inline-block;
}
</style>
</head>
<body>
<div class="tv" style="margin-top: 10px;">//也需要固定大小
<div style="width: 12250px">//要比上一级大
<img class="img" src="a.png">//需要固定大小
<img class="img" src="a.png">
<img class="img" src="a.png">
<img class="img" src="a.png">
<img class="img" src="a.png">
<img class="img" src="a.png">
</div>
</div>
</body>
</html>
JS 横向纵向滚动条
猜你喜欢
转载自blog.csdn.net/zhaohan___/article/details/86626393
今日推荐
周排行