JS实现表头固定，左右滚动不固定

最新推荐文章于 2022-07-09 22:38:05 发布

weixin_33695082

最新推荐文章于 2022-07-09 22:38:05 发布

阅读量335

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/CryOnMyShoulder/p/7553151.html

版权

<script type="text/javascript">
window.onscroll=function(){
var sl=-Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
document.getElementById('a908').style.left=sl+'px';
}
</script>
</head>
<body>
<div id="a908" style="position:fixed;left:0px;top:0px;border:solid 1px #000;width:100%;background:#fff;overflow:auto;">
fixed定位容器
</div>

注意以上代码有可能会失效，主要与父对象的overflow的值有关。

在做项目的时候我通过将项目中的某个页面的源文件（如下图的源文件）拷贝到.txt中，改后缀为.html打开验证onscroll时间是否有效的方式定位错误。通过使引入的css文件失效/有效的方式定位是哪一个CSS文件中的overflow属性影响到onscroll，然后再将CSS文件拷贝到刚才修改的.html文件中，发现是 .html .body{...overflow:hidden;...}这个属性影响到了onscroll事件的触发，将其注释掉之后，上面的代码正常运行。

转载于:https://www.cnblogs.com/CryOnMyShoulder/p/7553151.html

weixin_33695082

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现表头固定，左右滚动不固定

<script type="text/javascript">window.onscroll=function(){var sl=-Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);document.getElementById('a908').style.left=sl+'px...
复制链接

扫一扫