He estado tratando de leer el valor de scrollY en mi reactapp. Pero descubrí que está siendo desordenado por el desbordamiento.

Aquí está el código que usé para leer el scrollY:

 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> <div style={{color:"red"}}>{offset}</div> </div> ); }

Aquí está mi aplicación.jsx >>>

 import React, { Component } from 'react'; import { Route } from 'react-router'; import { Layout } from './components/Layout'; import { Home } from './components/Home'; import { FetchData } from './components/FetchData'; import { Counter } from './components/Counter'; import abc2 from './img/abc2.jpg' import './custom.css' import Resume from './components/resumePage/Resume'; import Test from './components/Test.jsx'; var backGStyle={ backgroundImage:`url(${abc2})`, minHeight: "100vh", backgroundSize:'cover', color:'red' } export default class App extends Component { static displayName = App.name; render () { return ( <div className="app" style={backGStyle}> <div className="mask"> <Layout> <Route exact path='/' component={Home} /> <Route path='/counter' component={Counter} /> <Route path='/resume' component={Resume} /> <Route path='/test' component={Test} /> </Layout> </div> </div> ); } }

y mi custom.css >>

 a { color: #0366d6; } code { color: #E01A76; } .btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; } .backgroundBody{ position: relative; } .app .mask{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; color:#fff; background-color:rgba(0, 0, 0, 0.6); overflow:auto; } .abc{ color: aqua; }

Y si elimino el desbordamiento: automático de custome.css .app .mask, puedo obtener el valor de scrollY pero mi imagen de fondo estará desordenada, habrá un espacio en blanco en el fondo de la mitad del contenido como esto >>>>