iPhone disable swiping left and right to make the page move

303
May 23, 2017, at 05:10 AM

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?

Answer 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.

READ ALSO
How do I create a smooth transition in my menu dropdown?

How do I create a smooth transition in my menu dropdown?

I'm trying to figure out how to make a smooth transition in my menu transitionI already wrote a function for the times to appear and disappear onclick, but I'm not sure how to style the transition

214
Bootstrap - Image Align - Within a row

Bootstrap - Image Align - Within a row

Im trying to center three small thumbnails in a 12 row, I only want these three images in the row, but using center-block, responsive image, align or breaking the row into smaller segments (4, 4, 4)

254
Mouseover popup speech bubble

Mouseover popup speech bubble

I'm new to javascript/css and would like to make a version of a mouseover popup similar to the one that displays over the underlined words here: http://stjapantimes

323
Updating CSS file at runtime, changing fontsize, background color and window size

Updating CSS file at runtime, changing fontsize, background color and window size

I want to give the user an option of changing font size, background color and window size at run time, ie

285