Menu
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).
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.
307
To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML. CSS.
Check all of your elements on "Mobile" view, and remove any high margins to the left or to the right side of the element. The mobile horizontal scrolling has been caused by setting a high fixed / minimum width for an element. Set elements to "auto", or just reduce the width on mobile devices.
You can also manage which apps have Magic Mouse horizontal scroll disabled from the app's menu in the menu bar. There is some complexity worth noting here: If you have “Disable horizontal scroll” checked in the prefs window, then every single app will have that menu item checked in the menu bar by default.
Go to Settings and tap Accessibility. Turn on the feature, then use the slider to select a sensitivity level.
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.
182
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
<style type="text/css">
body {
overflow-x:hidden;
}
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
