超宽横向滚动

初晨未凉

于 2024-01-22 10:32:11 发布

阅读量387

点赞数 6

分类专栏：笔记文章标签： css3

本文链接：https://blog.csdn.net/weixin_45638909/article/details/135742132

版权

笔记专栏收录该内容

59 篇文章 1 订阅

订阅专栏

<!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>
</head>
<style type="text/css">
		#inner_box {
			white-space: nowrap;
			overflow-x: scroll;
			/* overflow-y: hidden; */
		}

		.item {
			width: 350px;
			height: 200px;
			font-size: 30px;
			display: inline-block;

		}

		.item:nth-child(odd) {
			background: skyblue;
		}

		.item:nth-child(even) {
			background: pink;
		}

		/* 滚动条样式 */
		/*滚动条样式*/
		#inner_box::-webkit-scrollbar {
			width: 4px;
			height: 4px;
		}

		/* 修改滚动条样式 */
		#inner_box::-webkit-scrollbar-thumb {
			border-radius: 10px;
			-webkit-box-shadow: inset 0 0 5px rgba(180, 179, 179, 0.2);
			background: rgba(0, 0, 0, 0.2);
		}

		#inner_box::-webkit-scrollbar-track {
			-webkit-box-shadow: inset 0 0 5px rgba(221, 221, 221, 0.2);
			border-radius: 0;
			background: rgba(0, 0, 0, 0.1);

		}
	</style>

 
<body>
      <div id="inner_box">
      	<div class="item">
      		1
      	</div>
      	<div class="item">
      		2
      	</div>
      	<div class="item">
      		3
      	</div>
      	<div class="item">
      		4
      	</div>
      	<div class="item">
      		5
      	</div>
      	<div class="item">
      		6
      	</div>
      	<div class="item">
      		7
      	</div>
      	<div class="item">
      		8
      	</div>
      	<div class="item">
      		9
      	</div>
      	<div class="item">
      		10
      	</div>
      </div>

</body>
 
</html>