当用户从顶部滚动到位置 300 时触发事件？答案

【问题标题】：Trigger event when user scroll to position 300 from top?当用户从顶部滚动到位置 300 时触发事件？
【发布时间】：2022-11-15 19:38:30
【问题描述】：

当用户从顶部滚动到位置（顶部 + 300px）时，我正在使用 reactjs 并尝试更改 Div 的样式。如果从这个位置向下滚动，它将是 display: block 否则是 none。我如何通过反应来做到这一点？我在这里搜索，但所有结果都没有回答我的。

我尝试了一些使用 useRef、handleOnScroll 的方法，如下面的函数，但它不起作用。

const handleScroll = (e) => {
    const scrolledFromTop = contentRef.current?.scrollTop;
    setActive(scrolledFromTop > 300);
  };

<div ref={contentRef} onScroll={handleScroll}> ... </div>

【问题讨论】：

【解决方案1】：

使用window.scrollY 观看滚动距离。

const handleScroll = (e) => {
    setActive(window.scrollY > 300);
};

【讨论】：

【解决方案2】：

这可能会解决您的问题：

const handleScroll = (e) => {
  setActive(e.currentTarget.scrollTop > 300);
};

【讨论】：