Div scrolling freezes sometimes if I use -webkit-overflow-scrolling
For me, the freezing was repeatable and happened when trying to scroll up or down when already at the top or bottom, respectively. The fix was to add some listeners for touchstart and touchmove and detect these cases and event.preventDefault() on ’em.
Something like the following, where .scroller is the div that will actually scroll (changes to scrollTop).
var lastY = 0;var targetElt = document.querySelector(".scroller");targetElt.addEventListener('touchstart', function(event) { lastY = event.touches[0].clientY;});targetElt.addEventListener('touchmove', function(event) { var top = event.touches[0].clientY; var scrollTop = event.currentTarget.scrollTop; var maxScrollTop = event.currentTarget.scrollHeight - $(event.currentTarget).outerHeight(); var direction = lastY - top < 0 ? 'up' : 'down'; if ( event.cancelable && ( (scrollTop <= 0 && direction === 'up') || (scrollTop >= maxScrollTop && direction === 'down') ) ) event.preventDefault(); lastY = top;});I hope this helps the next poor soul that encounters this horrible bug! Good luck and keep fighting!
Try using overflow: hidden on body. This should resolve the issue: https://codepen.io/cppleon/pen/vYOgKzX
HTML
<!doctype html><html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <div id="scrollable-content"> <div class="site-header"></div> <div class="main-content"></div> </div> </body></html>CSS
body { /* magic is here */ overflow: hidden;}#scrollable-content { position: fixed; top: 0; left: 0; width: 100%; height: 50%; background-color: gray; overflow-y: auto; -webkit-overflow-scrolling: touch;}.site-header { width: 100%; height: 120px; background-color: orange;}.main-content { height: 200%;}
Stable solution
After many days to try to fix it, i saw that the problem comes from fixed body element, maybe because you don't want your users to see your page body bounce when the scroll is blocked: cf this example.When the body is fixed and you're experiencing scrolling freeze bug, if you inspect the body with Desktop Safari on you iOS device, you can see it's kind of "artificially" moving... yes webkit stuff...
I tried all solutions listed on this threat but also on github similar issues. No one was working.
The only stable fix for me is to use this package : body-scroll-lock and remove the fixed on your body element. Right now you can both enjoy fixed body and no scrolling freezing bugs.
Hope it will help people who are currently creating progressive web apps on IOS.