javascript - Chrome 不会在重新加载时翻译元素

Question

好吧，我有一个完整的页面滚动项目，除了这个 Chrome 之外，在 Firefox 上一切都工作得很好而且很漂亮。我有一个在滚轮事件上翻译的元素，所以没有实际的滚动。该元素的 CSS 是

#trasnlateMe {
    height: calc(var(--vh) * 400);
    width: 100%;
    overflow: hidden;
    position: relative;
    transition: transform 1s cubic-bezier(0.5, 0, 0.5, 1);
}

并且它具有内联样式

style="transform:translateY(0);"

在代码开头的我的js上我也有这个代码。

let container = document.querySelector("#trasnlateMe");
container.style.transform = "translateY(0)";

基本上，当您滚动时，我通过标志获得方向并通过此功能翻译页面。

const fullPageScroll = () => {
  containerHight = window.innerHeight * foldQuantity;
  yTrasnlationOfContainer = parseInt(
    container.style.transform.replace("translateY(", "")
  );
  if (
    (scrollDirection === "down" &&
      Math.abs(yTrasnlationOfContainer) <
        containerHight - containerHight / foldQuantity) ||
    (swipeDirection === "up" &&
      Math.abs(yTrasnlationOfContainer) <
        containerHight - containerHight / foldQuantity)
  ) {
    yTrasnlationOfContainer = yTrasnlationOfContainer - window.innerHeight;
  }
  if (
    (scrollDirection === "up" && yTrasnlationOfContainer < 0) ||
    (swipeDirection === "down" && yTrasnlationOfContainer < 0)
  ) {
    yTrasnlationOfContainer = yTrasnlationOfContainer + window.innerHeight;
  }

  if (holder === false && hambergurMenu.style.display !== "none") {
    holder = true;
    swipeDirection = null;
    container.style.transform = `translateY(${yTrasnlationOfContainer}px)`;
    for (let i = 1; i <= foldQuantity; i++) {
      if (yTrasnlationOfContainer === -(window.innerHeight * (i - 1))) {
        currentSection = i - 1;
      }
      fillRelatedCircle();
      setTimeout(() => {
        holder = false;
      }, 1000);
    }
  }
};
    //Handling wheel event of the whole page
    container.addEventListener("wheel", event => {
      if (event.deltaY > 0) {
        scrollDirection = "down";
      }
      if (event.deltaY < 0) {
        scrollDirection = "up";
      }
      event.stopPropagation();
      fullPageScroll();
    });

所以一切在firefox上都能正常工作，但是chrome决定不将#trasnlateMe的ytrasnlation设置为0，异常的是它在纸上是这样的，当你刷新后查看代码时，它看起来像这样>> style =“transform:translateY(0); 但它停留在视口(viewport)刷新之前的同一部分，并且整个滚动被破坏，它将视口(viewport)刷新之前的部分视为第一部分。

请帮忙，这太烦人了。

请注意:当我关闭选项卡并再次打开 html 文件时，Chrome 上的一切都运行良好，即使您没有这个错误的答案，您能告诉我我可以做什么来模仿重新加载时的相同行为吗？ ？一切都像页面现在打开一样。这也可以修复它。

Answer 1

当用轮子翻译事件替换滚动时，我遇到了类似的问题。

对我有帮助的是给 html 和 body:

overflow: hidden;
height: 100%;