Jquery 具有固定页眉和页脚的多列滚动

我有一个使用网格布局的应用程序，我尝试同时向scoll multiple column添加一个新功能。你可以看到我最后做了什么

因此，这样做的目的是能够同时滚动三列，但固定页眉和页脚。滚动可以从每一列开始，这就是为什么每一列都有名为

scrollable-y

的类，并通过执行

$（“.scrollable-y”）捕捉事件。在（'scroll'，回调）

但问题是谷歌Chrome上的滚动速度非常慢（滚动1px×1px）。另外，如果你抓取滚动条中的项目，它的工作很好。。。问题只出现在用鼠标中键滚动时。为什么?

有人能帮我吗

PS：这只是我整个网格布局的一部分，所以我不能改变结构

我就是这么做的：

$（.scrollable-y”）.on（'scroll'，函数（e）{
var ele=$（e.currentTarget）；
var top=ele.scrollTop（）；
$（'.scrollable-y'）.scrollTop（顶部）；
});

.container{
显示：网格；
网格模板列：200px 200px 200px；
网格模板行：50px 150px 50px；
}
.scrollable-y{
溢出：滚动；
溢出x：隐藏；
}
.标题{
背景：#ACACAC；
}
.页脚{
背景：#DEDEDE；
}

表1
表2
表3
Lorem ipsum dolor sit amet，是一位杰出的献身者。埃尼安是一位精英，他是一位不可告人的人。同侧腕关节暂时悬吊，同侧腕关节暂时悬吊。埃尼安在埃洛斯。高贵的王子莫里斯·因特杜姆·菲利斯·迪克特·康格。普尔维纳尔的苏打家族。梅塞纳斯-维尼那蒂turpis。我是塞姆佩尔·埃尼姆。佩伦茨克是一个接受者。这是一个很好的例子。这是我的生活。他是一个贵族，他是一个贵族。不要让我的智者成为精英。Donec lorem orci，iaculis non sodales vel，爱神之车。这是一个很好的例子。
Lorem ipsum dolor sit amet，是一位杰出的献身者。埃尼安是一位精英，他是一位不可告人的人。同侧腕关节暂时悬吊，同侧腕关节暂时悬吊。埃尼安在埃洛斯。高贵的王子莫里斯·因特杜姆·菲利斯·迪克特·康格。普尔维纳尔的苏打家族。梅塞纳斯-维尼那蒂turpis。我是塞姆佩尔·埃尼姆。佩伦茨克是一个接受者。这是一个很好的例子。这是我的生活。他是一个贵族，他是一个贵族。不要让我的智者成为精英。Donec lorem orci，iaculis non sodales vel，爱神之车。这是一个很好的例子。
Lorem ipsum dolor sit amet，是一位杰出的献身者。埃尼安是一位精英，他是一位不可告人的人。同侧腕关节暂时悬吊，同侧腕关节暂时悬吊。埃尼安在埃洛斯。高贵的王子莫里斯·因特杜姆·菲利斯·迪克特·康格。普尔维纳尔的苏打家族。梅塞纳斯-维尼那蒂turpis。我是塞姆佩尔·埃尼姆。佩伦茨克是一个接受者。这是一个很好的例子。这是我的生活。他是一个贵族，他是一个贵族。不要让我的智者成为精英。Donec lorem orci，iaculis non sodales vel，爱神之车。这是一个很好的例子。
页脚1
页脚2
页脚3

我自己也试过，它看起来很适合我。

---

我只会尝试触发滚动事件，如果鼠标位于相应的div上。现在，似乎您总是触发多个滚动事件。请尝试：但它是相同的。这就是您的建议？您的代码与我的建议不符，即使您打算这样做；）您可以在控制台中看到它。根据鼠标悬停，尝试绑定和解除绑定（打开和关闭）滚动事件。也许mouseenter和mousleave会更好。

$(".scrollable-y").on('mouseenter', function() {
    $(this).on('scroll', function() {
        $('.scrollable-y').scrollTop($(this).scrollTop());
    });
}).on('mouseleave', function() {
    $(this).off('scroll');
});