在GatsbyJS（ReactJS）中为文档添加滚动事件监听器

Question

我应该如何将以下事件监听器添加到GatsbyJS（ReactJS）功能组件中？

事件监听器

document.addEventListener('scroll', _ => document.getElementById('logo').style.setProperty('--v-adjust', window.scrollY + 'px'))

函数式组件

import React from 'react'
import { Link, useStaticQuery, graphql } from 'gatsby'

export default () => {
    //graphql statement
    return (
        <>...</>
    )
}

- Ryan Prentiss

Answer 1

我需要使用useEffect钩子来执行操作。 使用Effect Hook

更新的组件

import React, { useEffect } from 'react'

export default () => {
    useEffect(() => {
        document.addEventListener('scroll', _ => document.getElementById('logo').style.setProperty('--v-adjust', window.scrollY + 'px'))
    })
    return (
        <>...</>
    )
}

- Ryan Prentiss

---

嘿，Ryan，我遇到了同样的问题，并注意到在每次 Gatsby 导航后都会添加一个额外的事件监听器。通常浏览器会删除这些事件监听器，但由于 Gatsby 的“软”导航，我们需要手动处理。 - Harry Theo

此外，如果你想进一步提高滚动性能，可以使用被动事件监听器（passive event listeners）。传送门 - Harry Theo