disabling horizontal scroll on an iPhone website

D

6

22

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.

Demonolatry answered 8/4, 2013 at 12:59 Comment(1)

so as per your "solution" section - is there a way to force disabling horizontal scroll if there are offscreen elements? – Hepsiba 22/12, 2016 at 22:43

L

15

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">

Leukas answered 8/4, 2013 at 13:14 Comment(6)

Thank you for your reply but adding the CSS code didn't work, I can still scroll horizontally. – Demonolatry 8/4, 2013 at 13:33

are 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... – Leukas 8/4, 2013 at 13:46

just to check if it'd work, I added it inside the <head> tag using <style> tags. – Demonolatry 8/4, 2013 at 13:51

Thank 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. – Demonolatry 9/4, 2013 at 16:55

After trying many other solutions, this is what fixed the issue, thanks for this. – Accession 21/11, 2013 at 18:3

Here What i did. body{ height: 100vh; width: calc(100% - 5px); overflow: hidden; overflow-y: auto; } #__next{ height: 100%; overflow: hidden; overflow-y: auto; } – Pouched 31/8, 2022 at 18:26

B

30

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!

Breechblock answered 24/5, 2016 at 1:3 Comment(2)

Yeah, not forgetting the html part here was essential. – Superconductivity 8/9, 2021 at 17:36

@KostiantynKo why is html essential here? – Phototube 31/3, 2022 at 13:27

L

15

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">

Leukas answered 8/4, 2013 at 13:14 Comment(6)

Thank you for your reply but adding the CSS code didn't work, I can still scroll horizontally. – Demonolatry 8/4, 2013 at 13:33

are 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... – Leukas 8/4, 2013 at 13:46

just to check if it'd work, I added it inside the <head> tag using <style> tags. – Demonolatry 8/4, 2013 at 13:51

Thank 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. – Demonolatry 9/4, 2013 at 16:55

After trying many other solutions, this is what fixed the issue, thanks for this. – Accession 21/11, 2013 at 18:3

Here What i did. body{ height: 100vh; width: calc(100% - 5px); overflow: hidden; overflow-y: auto; } #__next{ height: 100%; overflow: hidden; overflow-y: auto; } – Pouched 31/8, 2022 at 18:26

R

5

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.

Ruppert answered 8/6, 2017 at 8:48 Comment(3)

Thanks! This helped in my specific case, when no other recommendations would help. :) – Splenomegaly 10/8, 2017 at 9:20

This fixed a problem I've been fighting for days! – Helbonna 31/8, 2017 at 20:22

This fixed the issue I was facing on iOS 12.x. Although on iOS 13.x and 14.x it worked fine. – Aun 30/1, 2021 at 5:44

C

4

Another way to achieve this is by using touch-action

body {
    touch-action: pan-y; /** Disable horizontal scrolling */
}

Coworker answered 23/11, 2023 at 19:15 Comment(2)

That worked for me, because i couldn't use overflow hidden, because of sticky elements inside the body. Thank you! Are there any side effects of this approach? – Anjanette 19/3 at 9:5

Nice solution! If only the horizontal scrollbar could be hidden too... – Oud 1/4 at 19:48

N

1

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.

Nissie answered 7/5, 2020 at 12:20 Comment(0)

D

1

I recently had the same problem but none of the other answers worked for me. In recent versions of Safari (at least desktop) you have to set the position to relative as well.

body, html {
  position: relative;
  overflow: hidden;
}

Dysfunction answered 22/2, 2022 at 16:10 Comment(0)

Recommended topics

Hot tags