無法讀取 scrollY 的值

Question

我一直在嘗試讀取 scrollY 的值（chrome 版本 96.0.4664.45（官方構建）（64 位））。 但這似乎不起作用。 這是我的代碼：

import React from "react";

import{useEffect, useState} from "react"


 
export default function Test() {
  const [offset, setOffset] = useState(0);
  const setScroll = () => {
    setOffset(window.scrollY);
  };

    useEffect(() => {
    window.addEventListener("scroll", setScroll);
    return () => {
      window.removeEventListener("scroll", setScroll);
    };
  }, []);

  return (
    <div className="App" style={{ height: "1000px" }}>
      <h1>Hello CodeSandbox</h1>
      <div>{offset}</div>
      
    </div>
  );
}

這是 output 的圖片：

Answer 1

這是您在問題片段中提供的相同代碼（它有效）。 我只是將scroll事件目標從window為document 。 有關文檔滾動事件，請參見 MDN 頁面： https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event

 <div id="root"></div><script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone@7.16.4/babel.min.js"></script> <script type="text/babel" data-type="module" data-presets="react"> const {useEffect, useState} = React; function Test () { const [offset, setOffset] = useState(0); const setScroll = () => setOffset(window.scrollY); useEffect(() => { document.addEventListener("scroll", setScroll); return () => document.removeEventListener("scroll", setScroll); }, []); return ( <div style={{ height: "1000px" }}> <h1>Hello CodeSandbox</h1> <div style={{ position: 'sticky', top: '1rem' }}>{offset}</div> </div> ); } ReactDOM.render(<Test />, document.getElementById('root')); </script>