Question

我有一个使用网格布局的应用程序，我尝试添加新功能以同时存储多个列。您可以看到我最后的工作。

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

来捕获事件的原因。

但是问题是在Google Chrome上滚动非常慢（滚动1px x 1px）。另外，如果您在滚动栏中抓取该项目，则效果很好...问题仅在您使用鼠标的中键滚动时才发生。为什么？

有人可以帮我吗？

PS：这只是我整个网格布局的一部分，所以我无法更改结构...

那是我所做的：

$(".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');
});

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

1 个答案: