Lovestoned Posted March 31, 2021 Share Posted March 31, 2021 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 Link to comment Share on other sites More sharing options...
akapowl Posted March 31, 2021 Share Posted March 31, 2021 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 4 Link to comment Share on other sites More sharing options...
Lovestoned Posted March 31, 2021 Author Share Posted March 31, 2021 I declare you a hero thanks for your reply friend... Link to comment Share on other sites More sharing options...
Lovestoned Posted March 31, 2021 Author Share Posted March 31, 2021 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? Link to comment Share on other sites More sharing options...
akapowl Posted March 31, 2021 Share Posted March 31, 2021 I honestly don't know because I don't have any Apple device at hand. Maybe someone else can help with that. Link to comment Share on other sites More sharing options...
GreenSock Posted March 31, 2021 Share Posted March 31, 2021 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). 1 Link to comment Share on other sites More sharing options...
Lovestoned Posted April 1, 2021 Author Share Posted April 1, 2021 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 Link to comment Share on other sites More sharing options...
akapowl Posted April 1, 2021 Share Posted April 1, 2021 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now