When I run this code, I get error "window is not defined"

Asked Aug 01 '20 at 19:36

Active Aug 01 '20 at 20:01

Viewed 29 times

I don't have a HTML file. All code is written in React and JS. This is how my index.js looks like.

const Home = ({ doc, posts }) => {

if (doc && doc.data) {
    return (
      <DefaultLayout>
        <Head>
          <title>{RichText.asText(doc.data.headline)}</title>
        </Head>
        <Header
          image={doc.data.image}
          headline={doc.data.headline}
          description={doc.data.description}
        />
        <PostList posts={posts} />
      </DefaultLayout>
    );
  }

  // Message when repository has not been setup yet
  return <SetupRepo />;
};

window.addEventListener('scroll', ()=>{  
   const {scrollTop, scrollHeight, clientHeight} = document.documentElement;
   console.log({scrollTop, scrollHeight, clientHeight});
});

Here I want to run this function on window scroll.

edited Aug 01 '20 at 20:01

asked Aug 01 '20 at 19:36

Abhishek Singh

1

what have you tried so far, and where is this function declared ? – Abdelrahman Hussien Aug 01 '20 at 19:38
Where are you writing this? Running this in a browser console works fine. – Cal McLean Aug 01 '20 at 19:42
This function is declared in index.js file. I am working on infinite scrolling. It is declared just above the function which gives me post through an api. – Abhishek Singh Aug 01 '20 at 19:46
have you loaded this script file in your html file ? – Abdelrahman Hussien Aug 01 '20 at 19:47
I have updated my question! Kindly look at it again. – Abhishek Singh Aug 01 '20 at 20:02
check this https://stackoverflow.com/questions/29725828/update-style-of-a-component-onscroll-in-react-js – Abdelrahman Hussien Aug 01 '20 at 20:04
It is more complicated!! – Abhishek Singh Aug 01 '20 at 20:10

When I run this code, I get error "window is not defined"

0 Answers0