div scroller flicking issue

[Lovestoned]

I wanted to prevent mobile address bar hiding and because of this reason I used this html to make it. But when I use scrolltrigger scroller as a div it is flicking or flashing when I scroll on mobile. How can fix that?

 

thanks.

 

See the Pen RwKoOGN by ersenturgut (@ersenturgut) on CodePen

[akapowl]

 

As you have been already told by @GreenSock in this thread

 

 

"The whole point is that you're trying to put everything into a scroller container which complicates things, and to avoid the funky browser non-synchronized scrolling thread, you need position: fixed on the pinned element, but that obscures pointer events and scrolling so you must handle that. "

 

That means you'd want to set pinType: 'fixed' to your pinning ScrollTrigger and in your CSS set pointer-events: none to whatever it is that is obscuring your scrolling - in your case section seems to be it. But as already menitoned too, you will then have to manually allow pointer-events for everything inside those sections that you want to be accassible by the mouse.

 

"Another idea is to set pointer-events: none on the pinned element, but you'd have to specifically set pointer-events: auto on your menu so that it's still clickable."

 

Here's a related older thread of mine:

 

 

 

This worked for me.

Is that better for you?

 

See the Pen 8261ce054b56a13878e149fb39ccee95 by akapowl (@akapowl) on CodePen

[Lovestoned]

I declare you a hero thanks for your reply friend...

 

 

[Lovestoned]

there is only 1problem about this solution...I have iphone5 device and scrolling not smooth...I added -webkit-overflow-scrolling: touch; but nothing changed...I have also iphone6 device and scrolling smooth and working good...what do you think?

 

[akapowl]

 

I honestly don't know because I don't have any Apple device at hand. Maybe someone else can help with that.

[GreenSock]

8 hours ago, Lovestoned said:

there is only 1problem about this solution...I have iphone5 device and scrolling not smooth...I added -webkit-overflow-scrolling: touch; but nothing changed...I have also iphone6 device and scrolling smooth and working good...what do you think?

I looked at it on my iPad and didn't notice anything odd at all. But beware that it's normal to see a very slight jump at the exact moment pinning occurs if you're scrolling quickly and that isn't a bug at all with ScrollTrigger - it's just the nature of how browsers handle things. They do scrolling of the main document on a DIFFERENT thread (not synchronized with the main thread), so it sometimes paints the scrolled position for a brief moment before it fires the JavaScript that does the pinning. As far as I know, that's absolutely impossible to avoid. The best we can do is offer the anticipatePin option (see the docs). 

[Lovestoned]

Hey  @akapowl

I've realized now..if I use pointer-events:none I cannot use click events on mobile and desktop...If I use pinType:fixed I cannot scroll...this is not a solution for me...If I remove pinType:fixed there is juddering when I scroll..finally I want to prevent mobile address bar hiding...that's why I opened this topic...

 

thanks

[akapowl]

21 minutes ago, Lovestoned said:

I've realized now..if I use pointer-events:none I cannot use click events on mobile and desktop

 

That's why this here has already been pointed to twice:

 

On 3/31/2021 at 10:19 AM, akapowl said:

But as already menitoned too, you will then have to manually allow pointer-events for everything inside those sections that you want to be accassible by the mouse.

 

 

 

22 minutes ago, Lovestoned said:

this is not a solution for me

 

The suggested solution worked fine for me so far. Sorry, but I can not offer a different one - preventing mobile address bars from appearing / disappearing means disabling / preventing default browser behaviour and that often comes with problems that one will have to work around if one is wanting to do things as such. And I wouldn't know of an other way to work around this as the one suggested.