Прокрутка нескольких столбцов с фиксированным верхним и нижним колонтитул - PullRequest
Новая
       21

Прокрутка нескольких столбцов с фиксированным верхним и нижним колонтитул

0 голосов
/ 05 июля 2018

У меня есть приложение, использующее сетку, и я пытаюсь добавить новые функции для одновременной прокрутки нескольких столбцов. Вы можете видеть, что я сделал в конце.

Таким образом, цель этого состоит в том, чтобы иметь возможность прокручивать три столбца одновременно, но с фиксированными верхним и нижним колонтитулами. Прокрутка может начинаться с каждого столбца, поэтому у каждого столбца есть класс с именем scrollable-y, и перехватывать событие можно с помощью команды $(".scrollable-y").on('scroll', callback)

Но проблема в том, что прокрутка в Google Chrome очень медленная (прокрутка 1 на 1 пиксель). Также, если вы возьмете элемент на полосу прокрутки, он будет работать нормально ... проблема только в том, что вы прокручиваете среднюю кнопку мыши. Почему?

Кто-нибудь может мне помочь, пожалуйста?

PS: это всего лишь часть моего макета сетки, поэтому я не могу изменить структуру ...

JSFiddle здесь

Вот что я сделал: 

$(".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>

1 Ответ

0 голосов
/ 05 июля 2018

Я попробовал сам, и это выглядит хорошо для меня. 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');
});
...