js辅助添加横向滚动条

最新推荐文章于 2023-12-04 11:29:51 发布

E-小伍

最新推荐文章于 2023-12-04 11:29:51 发布

阅读量1.9k

点赞数 1

分类专栏： javascript--小技巧文章标签： js 布局 css javascript

本文链接：https://blog.csdn.net/u010618627/article/details/50997992

版权

javascript--小技巧专栏收录该内容

7 篇文章 0 订阅

订阅专栏

记录工作中很实用的html布局时能应用到的小技巧！

背景提要：在一块小的布局中，需要有一个横向滚动条，但当你在css中键入overflow-x:auto之后；由于当div或其他标签没有设定固定宽，而导致overflow-x:auto失效；所以我用一个小的JS辅助解决。

javascript代码

<script>
function window_onload(){
	var Div=document.getElementById("stafflist");
	var Li=Div.getElementsByTagName("li");
	var x=Li.length;
	document.getElementById("theul").style.width=60*x+"px";
	}
</script>

因为我知道要调出来数据的li标签的宽度，但是不知道个数，所以我先获取了li标签的个数，在把得出的结果乘以li标签的宽，再赋值给需要的id；

这样，就可以在一块很小的模块内自如的用到横向滚动条。

html代码

<body οnlοad="window_onload() ">
<div class="mui-col-xs-9 stafflist" id="stafflist">
          	<ul id="theul">
            	<li><a href=""><img src="images/bscd001.png" width="100%" style=" border-radius:100%;"><p>红叶谷</p></a></li>
                <li><a href=""><img src="images/bscd001.png" width="100%" style=" border-radius:100%;"><p>红叶谷</p></a></li>
                <li><a href=""><img src="images/bscd001.png" width="100%" style=" border-radius:100%;"><p>红叶谷</p></a></li>
                <li><a href=""><img src="images/bscd001.png" width="100%" style=" border-radius:100%;"><p>红叶谷</p></a></li>
                <li><a href=""><img src="images/bscd001.png" width="100%" style=" border-radius:100%;"><p>红叶谷</p></a></li>
                <li><a href=""><img src="images/bscd001.png" width="100%" style=" border-radius:100%;"><p>红叶谷</p></a></li>
                <li><a href=""><img src="images/bscd001.png" width="100%" style=" border-radius:100%;"><p>红叶谷</p></a></li>
                <li><a href=""><img src="images/bscd001.png" width="100%" style=" border-radius:100%;"><p>红叶谷</p></a></li>
                <li><a href=""><img src="images/bscd001.png" width="100%" style=" border-radius:100%;"><p>红叶谷</p></a></li>
                <li><a href=""><img src="images/bscd001.png" width="100%" style=" border-radius:100%;"><p>红叶谷</p></a></li>
            </ul>
          </div>
</body>

css代码

.stafflist{overflow-x:auto;  }
.stafflist ul{ height:auto; overflow:hidden;}
.stafflist li{ width:52px; float:left; margin-right:8px;}
.stafflist li p{ line-height:28px;}

E-小伍

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js辅助添加横向滚动条

记录工作中很实用的html布局时能应用到的小技巧！背景提要：在一块小的布局中，需要有一个横向滚动条，但当你在css中键入overflow-x:auto之后；由于当div或其他标签没有设定固定宽，而导致overflow-x:auto失效；所以我用一个小的JS辅助解决。javascript代码function window_onload(){ var Div=docum
复制链接

扫一扫

专栏目录