单行元素实现横向滚动

显示滚动条：

不显示滚动条：

直接上代码

<style type="text/css">
		body {
			width: 100%;
		}

		* {
			margin: 0;
			padding: 0
		}

		#outBox {
			padding: 10px;
		}

		#inner_box {
			white-space: nowrap;
			overflow-x: scroll;
			overflow-y: hidden;
		}

		.item {
			width: 150px;
			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);

		}

		/* 取消滚动条 */
		/* #inner_box::-webkit-scrollbar-thumb {
			border-radius: 10px;
			-webkit-box-shadow: inset 0 0 0px transparent;
			background: transparent;
		}

		#inner_box::-webkit-scrollbar-track {
			-webkit-box-shadow: inset 0 0 0px transparent;
			border-radius: 0;
			background: transparent;
		} */
	</style>

    <div id="outBox">
		<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>
	</div>