Search code examples
ipadcssresponsive-designmedia-queries

Disable iPad horizontal scrolling

I have a website which has elements outside the viewport, which I use for animations, they basically kick in , every time you scroll to a different section of the page.

The problem is you can scroll horizontally thus taking the website's content out of the viewport and having access to the element which shouldn't be seen (something like an element with {right:-660px;} which should be well out of sight till it's supposed to come into the viewport{right:100px} or something).

reference of the problem

Have already tried 

<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />

And

body,html{overflow-x:hidden!important}

I'm sure this is a problem which might have many losing sleep over, just like me.

Any help would be hugely appreciated.

Solution

  • As Mac's and on iOS, overflow-x:hidden on the body isn't as forgiving as it is on PCs. If you must have an element that has to appear offscreen, put it in a div that is not wider than the screen and has overflow:hidden on it.

    E.g.

    .overflow-div { max-width: 100%; position: relative; overflow: hidden; }
.my-animatable-element { position: absolute; right: -660px; }

<body>
 <div class="overflow-div">
    <div class="my-animatable-element"></div>
 </div>
</body>

    A link, or code, would really go a long way in helping you solve your problem.

    Note: max-width:100% isn't necessary in my simplified example, but it might be in your specific case, which is why I put it in.