1. 程式人生 > >移動端tabbar按鈕滑動(給div加橫向滾動條)

移動端tabbar按鈕滑動(給div加橫向滾動條)

手寫程式碼乾貨,已測試(請在移動端中開啟除錯)

<!DOCTYPE html>
<html>
<head>
	<title>底部tabbar欄滑動</title>
	<script type="text/javascript">
		
	</script>
	<style type="text/css">
		.bottom{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 150px;
			background-color: #ccc;
			overflow-x: scroll;
			white-space: nowrap;

		}
		.bottom .item{
			width: 25%;
			height: 100%;
			background-color: blue;

			/*float: left;*/
			/*注意:一定不要設定浮動*/
			display: inline-block;


			text-align: center;
			line-height: 150px;
			color: orange;
			font-size: 32px;
		}
	</style>
</head>
<body>


	<div class="bottom">
		<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>

</body>
</html>