disabling horizontal scroll on an iPhone website
Solution 1
Add overflows on your body like this:
body {
font: 12px/20px "Helvetica neue", Helvetica, Arial, sans-serif;
font-weight: normal;
overflow: hidden;
overflow-y: auto;
}
And yes stay with this:
<meta name="viewport" content="width=device-width">
Solution 2
I know I am a little late to the party, but I was having this same issue and solved it by adding:
body, html{
overflow-x: hidden;
}
Hopefully this will help someone else!
Solution 3
I was having the same issue with a mobile menu positioned outside the viewport area. overflow-x: hidden solved in Android phones, but not in iPhones. I solved by changing 'absolute' to 'fixed' position to the menu:
body { overflow-x: hidden; }
nav { position: absolute; width: 300px; right: -300px; }
to:
body { overflow-x: hidden; }
nav { position: fixed; width: 300px; right: -300px; }
Hope it helps.
Solution 4
For me this fixed the issue as well:
html {
overflow-x: hidden;
max-width: 100vw;
}
By the max width the screen seems to be fixed.
![Fahad Hasan](https://i.stack.imgur.com/96gCg.jpg?s=256&g=1)
Fahad Hasan
22 years of age. Self-taught Website Developer. Internet Entrepreneur. Aviation, Automobile, Motorsports & Travelling Enthusiast.
Updated on May 08, 2020Comments
-
Fahad Hasan about 4 years
I am developing an iPhone version of a Wordpress driven website and I was wondering if there's any method to disable horizontal scrolling when the website is open in Safari for iPhone. Right now, I am half way through the development and just to check if I could disable horizontal scrolling, I have hidden any of the elements which were exceeding the screen width but still I can scroll horizontally to the right. I tried putting the following code inside the
<style>
tags in the<head>
but that didn't help:body { overflow-x: hidden; }
I have put the following
<meta>
code inside the head file to echo if the user is viewing the website from an iPhone but it only disables user-pinching i.e. you cannot zoom in and zoom out by pinching the screen.<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I am currently using an iPhone 4 to check the website and the website can be accessed by going to this link: http://ignoremusic.com. Looking forward to a solution from you guys, thanks.
SOLUTION: As suggested by @Riskbreaker, there were a few elements which were exceeding the width of ~312px which is why I could still swipe to the left and after adjusting the width of all such elements, I disabled horizontal swipe. One thing which I learned is that hiding overflow-x doesn't help in the case of an iPhone/iPad, you have to reduce the width of all the elements to that of the width of your screen otherwise you'll still be able to swipe horizontally.
-
Fahad Hasan about 11 yearsThank you for your reply but adding the CSS code didn't work, I can still scroll horizontally.
-
Riskbreaker about 11 yearsare you adding this on style.css or your main css? Also some of the css is getting ignore in your responsive like this:
#headertop {width: 980px;}
.... which is making horizontal to be swipe...just one example that needs fixing first... -
Fahad Hasan about 11 yearsjust to check if it'd work, I added it inside the <head> tag using <style> tags.
-
Fahad Hasan about 11 yearsThank you for your help. There were a few elements which were exceeding the page width and once I adjusted it, the problem was solved. Thanks again.
-
Mago Maverick over 10 yearsAfter trying many other solutions, this is what fixed the issue, thanks for this.
-
mdomino almost 7 yearsThanks! This helped in my specific case, when no other recommendations would help. :)
-
THE JOATMON almost 7 yearsThis fixed a problem I've been fighting for days!
-
Nitin Mistry over 3 yearsThis fixed the issue I was facing on iOS 12.x. Although on iOS 13.x and 14.x it worked fine.
-
Kostiantyn Ko almost 3 yearsYeah, not forgetting the
html
part here was essential. -
Nic Szerman about 2 years@KostiantynKo why is
html
essential here?