-webkit-overflow: touch; stops working when tapping on element outside of scroll container

Question

I have a really big bug on the iphone, that makes a page unusable and I just can't solve it. I can't find any topic about this issue as well.

I have the following screen:

In the middle, there is a div, which is set on -webkit-overflow: auto; to have smooth scrolling inside this div. The scrolling is working absolutely fine and smooth.

BUT only until I do a touchmove on another element outside of this div. If I do this and try to scroll the scrollcontainer again, it's frozen and not moving at all. After I tap around a few times on the scroll container it's scrolling again. It's losing the scroll focus of the scroll container and trying to scroll a parent.

So, if I do a movement like this:

This looks like this :

Note: I'm just doing one touchmove from the bottom container into the overflow div. After releasing the finger and then trying to scroll again, it still scrolls the parent div.

I made a short example, so you can have a look with your iphone/phone here.

This issue only appears when using -webkit-overflow: auto With normal overflow: scroll it's always working but yes... you know how laggy this scrolling feels.

Is there any way to force the scroll focus in the desired container, when you're clicking/tapping a container with -overflow-scrolling: touch;?

Answer 1

The iOS Safari Browser never really gives you full control over the scrolling. However there is a "hack" you can use, it requires JS tho:

• set position: fixed on body,html
• As soon as a touchmove occurs, set the body.scrollTop = 0 So in your case add:

CSS

body, html {
  margin: 0;
  position: fixed;
}

JS

document.addEventListener('touchmove',function (){
  document.body.scrollTop = 0
})

Example page for testing on device

Btw, a better way for handling this would be to make the headline/controls fixed and add a padding to the scrollcontainer. This wouldnt require any JS. try it

Answer 2

I too had this issue, my website worked fine on android phones, but on ios, i had to tap few times, to activate scroll.

I tried disabling body scroll, even tried this

-webkit-overflow-scrolling: touch; /* Lets it scroll lazy */

-webkit-overflow-scrolling: auto; /* Stops scrolling immediately */

I had to use custom scrollbar plugin mCustomScrollbar

This plugin completely overrides the system scroll. Here javascript controls the positioning of the scroll content. It makes the content position:relative and uses top to scroll the content.

If this plugin doesn't work for you, you can try any other scroll plugin. They all work the same way.