Question

我有一个固定位置的标头。而且我还有内容（项目包装器）带有静态位置。如果我的标头没有固定位置，它将正常地使用items-wrapper容器滚动，就像页面（具有同步）溢出-x时一样。但是我需要使固定标头中的项目与items-wrapper中的项目同步向左和向右滚动（反之亦然）。我在左右容器的滚动条上添加了一个事件侦听器，但是它不能很好地工作并且没有端点（我假设滚动条需要在到达视口的末端时停止，就像标题没有固定时的行为一样）位置）。如何同步它们？滚动的终点是什么？任何帮助将不胜感激！下面的代码示例

const fixedHeader = $('.header');
const headerWrapper = $('.header__wrapper');
const scrolledItems = $('.items-wrapper');
let shift = 0;

const scrollArea = (scrollItem) => {
  scrollItem.on('DOMMouseScroll mousewheel', function (e) {
    if(e.originalEvent.detail > 0 || e.originalEvent.wheelDeltaX < 0) {
      shift = shift - 20;
      scrolledItems.css('transform', `translateX(${shift}px`);
      headerWrapper.css('transform', `translateX(${shift}px`);
    } else {
      shift = shift + 20;
      scrolledItems.css('transform', `translateX(${shift}px`);
      headerWrapper.css('transform', `translateX(${shift}px`);
      //scroll left
    }
    return false;
  });
}

scrollArea(headerWrapper);
scrollArea(scrolledItems);

.container {
  border: 4px solid red;
  width: 500px;
  height: 300px;
  overflow-x: scroll;
  padding: 20px;
}

.header {
  display: flex;
  background-color: green;
  width: 500px;
  height: 50px;
  overflow-x: auto;
  padding: 10px;
  margin-bottom: 20px;
  position: fixed;
  top: 0;
  left: 20px;
  right:0;
}

.header__wrapper {
   display: flex;
   width: 100%;
}

.header > .item {
  background-color: yellow;
}

.wrapper {
  display: flex;
  flex-direction: row;
  height: 200px;
  overflow-x: auto;
}

.items-wrapper {
  display: flex;
  margin-top: 50px;
}

.item {
  background-color: blue;
  width: 20px;
  height: 20px;
  margin-right: 20px;
  flex-shrink: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="wrapper">
    <header class="header">
      <div class="header__wrapper">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
       </div>
    </header>
    <div class="items-wrapper">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
  </div>
</div>

Answer 1

嗯，您可以在 JS代码中尝试一下：

$('.header').scroll(function(){
    $('.wrapper').scrollLeft($(this).scrollLeft());    
    
    if ($('.header').scrollLeft() >= 270) {
        $('.wrapper').scrollLeft($('.wrapper').scrollLeft() + 50);
    }
})

$('.wrapper').scroll(function(){
    $('.header').scrollLeft($(this).scrollLeft()); 
})

更新2：

此更新将两个容器（header和wrapper）具有相同的宽度，水平滚动具有相同的高度，然后header事件滚动中的条件用于确定滚动的结尾不必要：

CSS：

.container {
  border: 4px solid red;
  width: 500px;
  height: 300px;
  overflow-x: scroll;
  padding: 20px;
}

.header {
  display: flex;
  background-color: green;
  width: 500px;
  height: 50px;
  overflow-x: auto;
  padding: 10px;
  margin-bottom: 20px;
  position: fixed;
  top: 0;
  left: 20px;
  right:0;
}

.header__wrapper {
   display: flex;
   width: 100%;
}

.header > .item {
  background-color: yellow;
}

.wrapper {
  display: block;
  flex-direction: row;
  width: 500px;
  height: 200px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px;
  position: fixed;
  left: 20px;
  top: 90px;
}

.items-wrapper {
  display: flex;
  margin-right: 0px;
}

.item {
  background-color: blue;
  width: 20px;
  height: 20px;
  margin-right: 20px;
  flex-shrink: 0;
}

JS代码：

$('.header').scroll(function(){
    $('.wrapper').scrollLeft($(this).scrollLeft());
})

$('.wrapper').scroll(function(){
    $('.header').scrollLeft($(this).scrollLeft()); 
})

滚动位置固定元素与非固定元素同步

1 个答案: