I have been trying to read the value of scrollY in my reactapp. But I found that it is being messed by overflow.

Here is the code that I used to read the 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>
  );
}

Here is my app.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>
     
    );
  }
}

and my 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;
}

And if I remove the overflow: auto from custome.css .app .mask, I am being able to get the value of scrollY but my background image will be messed up, there will be white space in the background of half of the content like this >>>>