html/css/js-横向滚动条的实现
Posted 做路握vgf
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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-横向滚动条的实现的主要内容，如果未能解决你的问题，请参考以下文章
JS或者Jquery如何取得横向和纵向滚动条的最大可以滚动的值？