table第一列水平固定，垂直可滚动

本文主要是介绍table第一列水平固定，垂直可滚动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

table第一列水平固定，垂直可滚动

既然有固定的话首先需要想到给table的第一列加上固定定位

#divTable >>> table tr td:nth-child(1) {position: fixed;}

但是此时table的第一列无论上下、左右滑动都是固定不动的，明显与需求不符，所以我们还需要执行以下代码

接下来我们要在methods里面添加一个方法方便调用

methods:{handleScroll () {var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTopconsole.log(scrollTop)$("#divTable table tr td:nth-child(1)").css("position","absolute")},
}

再者我们需要监听一下这个滚动事件

window.addEventListener('scroll', this.handleScroll)

上述代码的意思是 监听了table距离浏览器顶部的距离，换言之如果页面发生上下滚动事件的时候，就会把table的固定定位换位绝对定位。

有了以上逻辑处理方案这个功能就得以实现了。

注：此时需要注意一点！！！

如果table是动态生成的话！还需要添加

if($('#divTable').offset().top > 0){setTimeout(function () {$("#divTable table tr td:nth-child(1)").css("position","absolute")},50);}

就是说如果这个table还未生成的情况下，页面向下滚动距离后，待table生成后第一列会有错位的现象发生，则需要加上上面这段代码

这篇关于table第一列水平固定，垂直可滚动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---