3

I have been playing around with -webkit-overflow-scrolling:touch; for a while and I getting randomly the following problem:

I only need scroll top/bottom ( width is fixed ), but sometimes the user needs to scroll left and right to trigger the vertical scroll.

In other words, the user has to scroll horizontally to make the container scroll vertically.

again it is random, some times it just works.
I already have check all the relative positions for the child elements within the scroll.
any thoughts ?

DanielDMO
  • 86
  • 1
  • 9

4 Answers4

0

I had as well a scroll that never broke and by looking at the html inside it I realised that if you apply the -webkit-overflow-scrolling:touch; in ul element it will never break.

the scroll that used to break had many elements within it and all I had to do was make the ul elements scrollable separately.

cheers

DanielDMO
  • 86
  • 1
  • 9
0

Ran into the same problem, been struggling with it forever until I did this:

Changed overflow-y: scroll to overflow: scroll. I've loaded up the page close to 20 times now and haven't experienced the left/right going up/down weirdness.

graygilmore
  • 1,768
  • 1
  • 15
  • 17
  • I've tried this approach and didn't fix the problem in my case ... how does the html you are using look like? – DanielDMO Jul 24 '12 at 04:32
  • Well, it appears to have simply been a glitch. It is now doing the bug 100% of the time. I need to figure out if there was another change that I did... The search continues, I'm afraid. – graygilmore Jul 24 '12 at 17:59
  • 2
    Try checking this out as well: http://travisjbeck.com/blog/browsers/webkit-overflow-scroll-touch-vertical-scrolling-only-responds-to-horizontal-swiping/ – graygilmore Jul 24 '12 at 18:00
  • interesting and good to know the body with hidden visibility issue... the solution above fixed my problem tho, am getting the proper scroll direction 100% of the time now... hope it helps – DanielDMO Jul 24 '12 at 21:32
0

As stated in the comments by Graygilmore. This worked for me:

// NOTE 2019-04-09: [referenced link was removed]

Make sure no parent element of the scrollable area is visibility:hidden or display:none.

Tim van Oostrom
  • 1,961
  • 1
  • 12
  • 8
0

I work on a complex web application that uses multiple iframes. I have a window.setInterval setup that removes native scrolling from hidden iframes and adds it to the visible iframe. This works great except I experienced the same issue where I had to swipe left / right to scroll up down. I noticed if you opened or clicked on a different browser tab and then clicked back it fixed itself. We fixed our issue by adding the following jQuery after we apply the native scrolling to the visible iframe:

$(window).height($(window).height());

I am thinking this must force a repaint similar to clicking on a different tab and then clicking back does. Hopefully this helps someone in a similar situation!

Steve Thimmesch
  • 11
  • 1