html/css/js-橫向滾動條的實現
在前端UI設計時,網頁的制作很麻煩,深有感悟!碰到太多的不懂,或是第一次見,就要去網上找資料!橫向滾動條就是我遇到麻煩中其中的一個,其實也 很簡單,只是在幾次項目中都用到了這個橫向滾動條所以就拿出來說一下。
需求界面---如下圖: 就是一個div裏面放很多button,超出div寬度,下方出現橫向滾動條。實際情況中,肯定不止幾個button,它是可以動態的添加進去,所以父div的寬度肯定不夠,但界面的位置排版又有要求,所以不得不弄一個橫向滾動條。
代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>進入分區</title>
</head>
<body>
<div style="height:60px;
overflow-x:scroll;
white-space:nowrap;
width:500px;">
<button style="height:38px;
margin-top:2px;">1號分區</button>
<button style="height:38px;
margin-top:2px;">2號分區</button>
<button style="height:38px;
margin-top:2px;">3號分區</button>
<button style="height:38px;
margin-top:2px;">4號分區</button>
<button style="height:38px;
margin-top:2px;">5號分區</button>
<button style="height:38px;
margin-top:2px;">6號分區</button>
<button style="height:38px;
margin-top:2px;">7號分區</button>
<button style="height:38px;
margin-top:2px;">8號分區</button>
</div>
</body>
</html>
html/css/js-橫向滾動條的實現