3

I'm gonna try my best to explain this. If you go to target.com, or amazon.com on any iPhone, and you try to swipe left or right the page doesn't move. I currently have a website where only the home page is moving if someone swipes left or right. The screen will jump back to the middle if you let go, but it's still annoying. It's only on the iPhone, and this isn't related to the iPhone 7 where swiping has you go back or forward. The only thing that has fixed it is zooming out of the page, and then when it jumps back to normal, only then can you not swipe left and right. Here's the website link to check: airlinehyd.com

Is there a way to turn this off via jQuery or CSS? I've tried adding overflow-x: hidden; to the body but that doesn't do anything. Any ideas?

xohbrittx
  • 161
  • 1
  • 2
  • 11

1 Answers1

1
html {
overflow: hidden;
/* height: 100%; I commented out this declaration because it messes up your scrolling */
}

body {
height: 100%;
overflow: auto;
}

Source: Prevent "overscrolling" of web page

Make sure to test that in all browsers as well as mobile before you push to production, but it does work on iphone.

Kyle Vassella
  • 2,296
  • 10
  • 32
  • 62
  • this works as I want, but this prevents scrolling when using the inspect tool, so I'll have to find another solution – xohbrittx May 22 '17 at 20:46
  • Don't add these rules to selectors that include classes or ids. Make sure your selector just says `html {}` and `body{}` - create these new rules at the bottom of your css to make sure. And remove your old `overflow-x: hidden` from the body just in case. This fix works fine for me on your website using the Safari Mobile Web Inspector (on iphone) and does not break your scrolling when implemented. – Kyle Vassella May 22 '17 at 20:51
  • You might have tried my solution before I commented out the `height: 100%` from inside `html {}` - see my updated answer with the greyed out area. When I included `height: 100%;` in the `html {}` selector, that's what hampered your scrolling a bit. When I commented it out, works like a charm. Alternatively, maybe the dev environment you're trying this on is different from the live site you pointed us to. If you've already tried my solution above with the commented out `height: 100%`, try un-commenting it and see if that makes it work. – Kyle Vassella May 22 '17 at 20:59