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

Question

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

所以这样做的目的是能够同时滚动三列，但要固定页眉和页脚。滚动可以从每一列开始，这就是为什么每一列都有名为scrollable-y的类，并通过$(".scrollable-y").on('scroll', callback)捕获事件

但问题在于 Google Chrome 上的滚动速度非常慢（滚动 1 像素 x 1 像素）。此外，如果您抓住滚动条中的项目，它就可以正常工作......问题仅在于您使用鼠标中键滚动时。为什么？

有人可以帮帮我吗？

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

JSFiddle here

这就是我所做的：

$(".scrollable-y").on('scroll', function(e) {
    var ele = $(e.currentTarget);
    var top = ele.scrollTop();
    $('.scrollable-y').scrollTop(top);
});
       

.container{
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows:50px 150px 50px;
}

.scrollable-y{
  overflow: scroll;
  overflow-x: hidden;
}

.header{
  background: #ACACAC;
}

.footer{
  background: #DEDEDE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="header">
    Tab 1
  </div>
  <div class="header">
    Tab 2
  </div>
  <div class="header">
    Tab 3
  </div>
  
  <div class="scrollable-y" id="scrollable1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed elit quis dolor ultricies porta. Suspendisse tempus malesuada ipsum, et luctus mi dictum at. Aenean at accumsan eros. Phasellus dignissim mauris interdum felis dictum congue. Proin feugiat sodales pulvinar. Maecenas eu venenatis turpis. Vivamus id semper enim. Pellentesque a suscipit metus. Praesent pretium sem ut interdum luctus. Quisque ornare vitae est id pretium. Quisque cursus odio sit amet ante feugiat, quis ornare elit semper. Donec id ipsum quis sapien scelerisque laoreet vel sit amet elit. Donec lorem orci, iaculis non sodales vel, vehicula at eros. Quisque nec vulputate arcu.
  </div>
  <div class="scrollable-y" id="scrollable2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed elit quis dolor ultricies porta. Suspendisse tempus malesuada ipsum, et luctus mi dictum at. Aenean at accumsan eros. Phasellus dignissim mauris interdum felis dictum congue. Proin feugiat sodales pulvinar. Maecenas eu venenatis turpis. Vivamus id semper enim. Pellentesque a suscipit metus. Praesent pretium sem ut interdum luctus. Quisque ornare vitae est id pretium. Quisque cursus odio sit amet ante feugiat, quis ornare elit semper. Donec id ipsum quis sapien scelerisque laoreet vel sit amet elit. Donec lorem orci, iaculis non sodales vel, vehicula at eros. Quisque nec vulputate arcu.
  </div>
  <div class="scrollable-y" id="scrollable3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed elit quis dolor ultricies porta. Suspendisse tempus malesuada ipsum, et luctus mi dictum at. Aenean at accumsan eros. Phasellus dignissim mauris interdum felis dictum congue. Proin feugiat sodales pulvinar. Maecenas eu venenatis turpis. Vivamus id semper enim. Pellentesque a suscipit metus. Praesent pretium sem ut interdum luctus. Quisque ornare vitae est id pretium. Quisque cursus odio sit amet ante feugiat, quis ornare elit semper. Donec id ipsum quis sapien scelerisque laoreet vel sit amet elit. Donec lorem orci, iaculis non sodales vel, vehicula at eros. Quisque nec vulputate arcu.
  </div>
  
  
  <div class="footer">
    Footer 1
  </div>
  <div class="footer">
    Footer 2
  </div>
  <div class="footer">
    Footer 3
  </div>
</div>

Answer 1

我自己试过了，对我来说看起来不错。 https://jsfiddle.net/hb7uxpga/88/

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