Menu
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.
295
In some instances, using overflow: hidden; will lock your page at the top, with no ability to scroll down. As Mikeys4u relates, it's usually better to use overflow-x: hidden; .
You can also set the overflow-x CSS property to hidden, which prevents child content from wrapping within its container but turns off sideways scrolling. Another solution is to set the width of child elements to 100%.
Go to Settings and tap Accessibility. Turn on the feature, then use the slider to select a sensitivity level.
Horizontal scrollbar appear on your site because div “video banner” has width 100 vw which mean 100% of browser width. Now, since your site has vertical scrolling bar it takes a little bit width and div still trying to be full browser width. For fix it, make “video banner” width = 100%.
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!
128
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">
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.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
