Scroll snap split sections 100vh mobile adressbar

[mhkey]

Hey there,

 

I'm building a website with vertical split screens and full viewport sections. Each section is divided in half where both sides can have overflow content. When theres no overflowing content, the page should scroll to the next section. When theres overflowing content, it first should scroll to the bottom/top and then to the next/previous section.

 

Unfortunately it doesnt work properly in mobile devices with the auto hide adressbar. This breaks the section scrolling and the sections either have a gap (with 100vh) or an overlapping section (with 100%). Even with ignoreMobileResize or normalizeScroll.

 

So the idea is to wrap everything in a parent container with 100% height and set body overflow to hidden - this prevents the animation of the adressbar. But then the animation of window doesnt work. 

 

See the Pen WNLxqvQ by mhkey (@mhkey) on CodePen

[ryan_labar]

Hi @mhkey,

 

Have you tried using the new(ish) lvh or (dvh) units to set your height? There's likely be some overlap before you scroll, but I think this may be better than using a body with overflow hidden, in this instance.

[mhkey]

12 hours ago, ryan_labar said:

Hi @mhkey,

 

Have you tried using the new(ish) lvh or (dvh) units to set your height? There's likely be some overlap before you scroll, but I think this may be better than using a body with overflow hidden, in this instance.

Yes I did. Thats why Ive explained that less or more height breaks the scrolling effect

[Rodrigo]

Hi,

 

You could try normalizeScroll():

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

Also you could try ignoreMobileResize:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.config()

 

Hopefully this helps.

Happy Tweening!

[mhkey]

Hello Rodrigo,

 

I also did that, as you can read in my first post.

[GreenSock]

17 hours ago, mhkey said:

So the idea is to wrap everything in a parent container with 100% height and set body overflow to hidden - this prevents the animation of the adressbar. But then the animation of window doesnt work. 

That's because you'd be scrolling the wrong thing. Did you try scrolling the correct element in that setup? 

 

One of the main problems here is that you're hijacking the scroll and FORCING it with JavaScript even while the browser is trying to allow native scrolling by the user. So they may be dragging with their finger (or using their mouse wheel) and the browser handles scrolling on a separate (non-synchronized) thread, thus it paints it at the new position visually and then the JavaScript kicks in and moves it to its "correct" position (causing jitter). 

 

Another thing you could try is adding a touchmove/wheel event listener (with {passive: false}) and call preventDefault() on those events [only] while you're doing the JS-driven scrolling. Basically you'd be disabling the native scroll while controlling it with JS.