使用javascript

Question

我有2个容器，我正在尝试劫持滚动事件，并使用translate移动它们。第一个包裹整个页面，第二个包裹我想水平滚动。

问题是滚动时我无法获得确切的滚动位置。这导致水平滚动部分在向上滚动时永远不会返回到0位置。

我意识到这很可能是浏览器未返回滚动条命中的每个值。

我的问题是，向上滚动时如何将水平滚动容器的值返回0？这些值可能相差很大。快速滚动时，它可能会偏离100px，这是无法接受的。

在下面的演示中，我在控制台中记录updateSection()函数中的滚动值。这是一个简单的功能，可检查该部分是否在视口的顶部，然后开始水平滚动。从日志中可以清楚地看到，向上滚动转换值时，转换值永远不会回到0。

有什么好方法可以解决这个问题，如何获得所需的确切数字？

这里是小提琴JsFiddle

这是一个片段

const ScrollEase = opts => {
  const scrollContainer = document.querySelector(opts.container);
  const spacer = document.querySelector(opts.spacer);
  const containerOffset = opts.containerOffset || '0px';
  let yScroll = window.scrollY || window.pageYOffset;

  /**
   * ---------------------------------------------------------------
   * Styling Functions
   * ---------------------------------------------------------------
   */
  const setTransform = (el, transform) => {
    el.style.transform = transform;
    el.style.WebkitTransform = transform;
  };

  const setSpacerStyle = () => {
    const containerHeight = scrollContainer.getBoundingClientRect().height;
    const height = containerHeight;
    spacer.style.height = height + 'px';
    spacer.style.width = '1px';
    spacer.style.position = 'relative';
  };

  const setContainerStyle = () => {
    const top = containerOffset;
    scrollContainer.style.position = 'fixed';
    scrollContainer.style.top = top;
    scrollContainer.style.left = 0;
    scrollContainer.style.zIndex = 2;
    scrollContainer.style.width = '100%';
  };

  /**
   * ---------------------------------------------------------------
   * Animating Container Functions
   * ---------------------------------------------------------------
   */

  const updateScroll = () => {
    yScroll = window.scrollY || window.pageYOffset;
    setTransform(scrollContainer, 'translateY(' + -yScroll + 'px)');
    updateSection();
  };

  const updateSection = () => {
    const el = document.querySelector('[data-type="scroll"]');
    const rect = el.getBoundingClientRect();
    const bodyTop = document.body.getBoundingClientRect().top;
    const offset = rect.top - bodyTop;

    if (rect.top < 0) {
      console.log(yScroll - offset);
      setTransform(el, 'translateX(' + -(yScroll - offset) + 'px)');
    }
  };

  window.addEventListener('scroll', updateScroll);
  setContainerStyle();
  setSpacerStyle();
};

ScrollEase({
  container: '.scrollContainer',
  spacer: '.scrollSpacer'
});

[data-type='scroll'] {
  height: 50vh;
  width: 200vw;
  display: flex;
}

[data-type='scroll'] .box {
  flex: 1;
  background: rgb(200,200,200);
  margin: 2rem
}

footer{
  padding: 100px 10px;
  text-align:center;
  background: blue;
  color:white;
}

<div class="scrollSpacer"></div>
<div class="scrollContainer">
  <h1>Scroll Down</h1>
  <div style="height: 100vh"></div>

  <div data-type="scroll">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div style="height: 200vh"></div>

  <footer>Footer</footer>
</div>

任何帮助或见解将不胜感激。