如何将 ScrollToTop 按钮设置为在视口高度上处于活动状态？

Question

目前我正在使用硬编码的高度点来触发可见的 ScrollToTop 按钮。 我希望在通过视口高度时触发解决方案。

  const { scrollDirection } = useScrollDirection()
  const { scrollPosition } = useScrollPosition()
  const [isVisible, setIsVisible] = useState(false)
  const toggleVisible = () => {
    if (scrollPosition === 0) {
      setIsVisible(false)
    }
    **if (scrollPosition > 800) {
      setIsVisible(true)
    } else if (scrollPosition <= 799) {
      setIsVisible(false)
    }**
  }
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    })
  }
  window.addEventListener("scroll", toggleVisible)

Answer 1

你可以使用window.innerHeight

const toggleVisible = () => {
    const viewportHeight = window.innerHeight;
    if (scrollPosition === 0) {
        setIsVisible(false)
    }
    **if (scrollPosition > viewportHeight) {
        setIsVisible(true)
    } else if (scrollPosition <= viewportHeight) {
        setIsVisible(false)
    }**
}