时间戳

首页 > 解决方案 > window.onscroll css transformY 过渡闪烁

javascript - window.onscroll css transformY 过渡闪烁

问题描述

在我的反应项目中，我希望导航在向下滚动时隐藏并在向上滚动时显示。我正在使用窗口事件侦听器进行滚动，它会触发我的toggleNavigation函数和 CSStransform: translateY和transition. 无论我使用鼠标滚轮、键盘箭头还是拖动滚动条，导航都会在向上或向下滚动时闪烁。（运行时还有一些其他条件，toogleNavigation但它们不相关。）

导航组件

import React, { useEffect, useState } from "react";

export default Navigation = () => {
  const [prevScrollpos, setPrevScrollpos] = useState(window.pageYOffset);
  const [translateY, setTranslateY] = useState("0");

  const toggleNavigation = (prevScrollpos) => {
    const currentScrollpos = window.pageYOffset;
    if (currentScrollpos > prevScrollpos + 50) {
      //navigationHtml.style.top = '-116px'
      setTranslateY("-116px");
      setPrevScrollpos(currentScrollpos);
    } else if (currentScrollpos + 50 < prevScrollpos) {
      //navigationHtml.style.top = '0'
      setTranslateY("0");
      setPrevScrollpos(currentScrollpos);
    }
  };

  useEffect(() => {
    window.addEventListener(
      "scroll",
      toggleNavigation.bind(this, prevScrollpos)
    );
    return () => {
      window.removeEventListener("scroll", toggleNavigation);
    };
  }, [prevScrollpos]);
  return (
    <nav style={{ transform: `translateY(${translateY})` }}>
      <ul>
        <li>random text 1</li>
        <li>random text 2</li>
      </ul>
    </nav>
  );
};

CSS

nav {
  background-color: orangered;
  position: fixed;
  height: 120px;
  width: 100%;
  transition: transform 0.5s;
}
ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
}
li {
  margin: 20px;
}

工作代码框： https ://codesandbox.io/s/jolly-haze-flfjj ?file=/src/Navigation.js

到目前为止，我已经尝试过但没有成功：

做出反应：将隐藏/显示导航的限制从 50 更改为 100 或 1

在 CSS 中：

在我使用更改top而不是之前，translateY但动画并不流畅和活泼，尽管它没有闪烁。我在 Chrome、Edge、Firefox 和 Opera 中对其进行了测试，所有这些都存在问题。

任何帮助将非常感激。

标签： javascriptreactjscss-transitionscss-transforms

解决方案

所以我自己解决了这个问题。问题是我在 React 中的糟糕设计。我不应该使用useState钩子来跟踪滚动，因为它会导致按设计重新渲染组件。几卷之后，滞后的行为就很明显了。在性能更高的 PC 上需要更多滚动（更多组件重新渲染）才会滞后。现在我用一个简单的let变量跟踪滚动，并且导航组件仅在显示或隐藏时重新呈现。

Codesandbox： https ://codesandbox.io/s/condescending-minsky-00xi0?file=/src/Navigation.js

推荐阅读