Javascript 固定标题表格在水平滚动时出现问题

我正在尝试创建一个带有固定标题表的演示。第一个表格水平滚动工作正常，但第二个表格水平滚动条出现问题。当我滚动第二个表格的水平滚动条时，垂直滚动条区域不是固定的。我正在分享我的代码

表格演示：

//JS
$（'#maintalbe.pane hScroll'）。滚动（函数（）{
$（'.pane-vScroll'）.width（$（'.pane-hScroll'）.width（）+$（'.pane-hScroll'）.scrollLeft（））；
});
*{
框大小：边框框；
}
身体{
字体：14px/1 Arial，无衬线；
}
桌子{
边界塌陷：塌陷；
背景：白色；
表布局：固定；
宽度：100%；
}
th，td{
填充：8px 16px；
边框：1px实心#ddd；
宽度：160px；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}
.窗格{
背景：#eee；
}
.窗格玻璃{
溢出：自动；
宽度：400px；
背景：绿色；
}
.窗格vScroll{
溢出y：自动；
溢出x：隐藏；
高度：200px；
背景：红色；
}
.窗格--表2{
宽度：400px；
溢出-x：滚动；
}
.pane--第2张表，.pane--第2张表{
宽度：自动；
最小宽度：160px；
}
.窗格--表2 t车身{
溢出y：滚动；
溢出x：隐藏；
显示：块；
高度：200px；
}
.窗格--表2 thead{
显示：表格行；
}
.mt-4{
边缘顶部：20px；
}

示例1：双表结构
福福
1Fooofoo
2fooofoo
3fooo
四福福福福福福福福福福福福福
五福福
6fooofoo
七福福
八福福
9fooo
10fooofoo
11福福
12fooofoo
13福福
14福福
15福福福
16福福福
17福福
18fooofoo
19福福
20fooo
21fooo
22福福
23foo
24foo
25fooo
26foooo
27福福
28foooo
28foooo
29福福
30fooo
示例2：双表结构
福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福
1Fooofoo
2fooofoo
3fooo
四福福福福福福福福福福福福福
五福福
6fooofoo
七福福
八福福
9fooo
10fooofoo
11福福
12fooofoo
13福福
14福福
15福福福
16福福福
17福福
18fooofoo
19福福
20fooo
21fooo
22福福
23foo
24foo
25fooo
26foooo
27福福
28foooo
28foooo
29福福
30fooo
问题是因为在
滚动
事件处理程序中，您选择了所有
.pane vScroll
和
.pane hScroll
元素，而不仅仅是与当前滚动表相关的元素

要解决此问题，请使用
this
关键字引用引发滚动事件的元素，然后从中遍历DOM以查找相关元素并仅设置其属性。试试这个：

$('.pane .pane-hScroll').scroll(function() {
  var vScrollWidth = $(this).width() + $(this).scrollLeft();
  $(this).find('.pane-vScroll').width(vScrollWidth);
});

完整示例：


$（'.pane.pane hScroll'）。滚动（函数（）{
var vScrollWidth=$（this.width（）+$（this.scrollLeft（）；
$（this.find（'.pane vScroll'）.width（vScrollWidth）；
});
*{
框大小：边框框；
}
身体{
字体：14px/1 Arial，无衬线；
}
桌子{
边界塌陷：塌陷；
背景：白色；
表布局：固定；
宽度：100%；
}
th，
运输署{
填充：8px 16px；
边框：1px实心#ddd；
宽度：160px；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}
.窗格{
背景：#eee；
}
.窗格玻璃{
溢出：自动；
宽度：400px；
背景：绿色；
}
.窗格vScroll{
溢出y：自动；
溢出x：隐藏；
高度：200px；
背景：红色；
}
.窗格--表2{
宽度：400px；
溢出-x：滚动；
}
.窗格--表2，
.窗格--表2 td{
宽度：自动；
最小宽度：160px；
}
.窗格--表2 t车身{
溢出y：滚动；
溢出x：隐藏；
显示：块；
高度：200px；
}
.窗格--表2 thead{
显示：表格行；
}
.mt-4{
边缘顶部：20px；
}

示例1：双表结构
福
福
福
福
1.
福
福
福
2.
福
福
福
3.
福
福
福
4.
福福福福福福福福福福福福福
福
福
5.
福
福
福
6.
福
福
福
7.
福
福
福
8.
福
福
福
9
福
福
福
10
福
福
福
11
福
福
福
12
福
福
福
13
福
福
福
14
福
福
福
15
福
福
F