CODEWITHSUNDEEP
cssscrolloverflowtouchmove
user3561012
user3561012

Reputation: 273

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

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:

enter image description here

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:

enter image description here

This looks like this :

enter image description here

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;?

Upvotes: 17

Views: 8328

Answers (2)

Manuel Otto
Manuel Otto

Reputation: 6540

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

Upvotes: 16

Gautam Naik
Gautam Naik

Reputation: 9338

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.

Upvotes: 2

Related Questions