为什么滚动事件处理程序在useEffect react js中不起作用答案

【问题标题】：Why scroll event handler does not work in useEffect react js为什么滚动事件处理程序在useEffect react js中不起作用
【发布时间】：2022-08-02 19:48:57
【问题描述】：

我创建了一个返回元素滚动状态的自定义钩子；但是scrollHandler 只触发一次！下面是我的代码：

import { MutableRefObject, useEffect, useState } from \"react\"

export const useScrollState = <TElement extends HTMLElement>(
  ref: MutableRefObject<TElement | null>,
) => {
  const [isTop, setIsTop] = useState(true)
  const [isBottom, setIsBottom] = useState(false)
  const targetRef = ref?.current
  const isScrollable: boolean =
    (targetRef && targetRef.offsetHeight < targetRef.scrollHeight) ?? false

  const scrollHandler = () => {
    if (targetRef && Number(targetRef.scrollTop.toString()) === 0) {
      setIsTop(true)
    } else setIsTop(false)

    if (targetRef && targetRef.offsetHeight + targetRef.scrollTop >= targetRef.scrollHeight) {
      setIsBottom(true)
    } else {
      setIsBottom(false)
    }
  }

  useEffect(() => {
    console.log(\"useEffect\")

    targetRef?.addEventListener(\"scroll\", scrollHandler)

    return () => {
      targetRef?.removeEventListener(\"scroll\", scrollHandler)
    }
  }, [targetRef])


  return {
    isTop,
    isBottom,
    isScrollable,
  }
}

它应该得到一个 ref 对象，该对象引用我们想知道它的滚动状态的元素；我的钩子怎么了？

标签： javascript reactjs

【解决方案1】：

scroll 仅在发生实际滚动时才会触发。

因此，您的 div 需要小于其内容并且需要显示滚动条。

此外，useEffect 依赖数组必须是这样的：[ref] 而不是[ref.current]；

【讨论】：