0
155
ViewsNo he podido leer el valor de scrollY
He estado tratando de leer el valor de scrollY (versión de Chrome 96.0.4664.45 (compilación oficial) (64 bits)). Pero no parece funcionar. Aquí está mi código:
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> ); } Aquí hay una imagen de la salida: 
·
Juan Pablo Isaza
1 answers
Answer question0
Aquí está el mismo código que proporcionó en su pregunta en un fragmento (funciona). Simplemente cambié el objetivo del evento de scroll de window a document . Consulte la página de MDN para el evento de desplazamiento del documento: 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>
·
Juan Pablo Isaza
Report
Answer question