CODEWITHSUNDEEP
cssreactjs
David
David

Reputation: 403

react-intersection-observer always returns true in the beginning if I refresh the page

My landing page has 3 sections

I put ref={ref} in my second page then I refresh the page

Expected:

I expect inView to return false only in the beginning, and then becomes true when I scroll down.

Actual return false->false->true->false

enter image description here

enter image description here

I guess the reason for this is like this : landing page before load ====> inView = false

landing page before is loading ====> inView = false

landing page fully loaded, the observer "sees" page 2 ===> inView = true

page 2 is quickly pushed to the bottom as I am supposed to see page 1 on first load ===> inView = false

but I have no idea how to solve this...

Upvotes: 1

Views: 2204

Answers (1)

David
David

Reputation: 403

I have figured it out

need to wrap the content in the first page and then set view height = 100 vh in css

e.g.

<div className="firstPage"> <-set this 100vh
   ddd
</div>

Upvotes: 1

Related Questions