When using scrollme js script it gives scroll left to right on mobiles

Question

Hi when using the scrollme script I get a scroll left to right when viewing on mobiles.

You can view the script here:

http://scrollme.nckprsn.com/

I have used the overflow-x:hidden on the body but it still gives a scroll effect from left to right.

Here is the body css:

body{
    width:100%;
    top:0;
    bottom:0;
    padding:0;
    margin:0;
    background-color:#f6f6f6;
    font-family: 'Lato', sans-serif;
    letter-spacing:1px;
    color:#727272;
    overflow-x:hidden;
}

I have tried everything I can think of but the scroll effect does not go away.

If anyone can shed some light I would appreciate it.

Thanks

Answer 1

Try this:

Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers

Creating a site wrapper div inside the body and applying the overflow-x:hidden to the wrapper INSTEAD of the body or html fixed the issue.

It appears that browsers that parse the tag simply ignore overflow attributes on the html and body tags.

Answer 2

Have you tried using overflow: hidden !important?

In most cases, the !important usually overrides other CSS code that is telling it to do otherwise.

Answer 3

On mobile:

 var width = (window.innerWidth > 0) ? window.innerWidth : screen.width
 $("body").css("max-width",width);

CSS:

body{
    width : 100%
    top:0;
    bottom:0;
    padding:0;
    margin:0;
    background-color:#f6f6f6;
    font-family: 'Lato', sans-serif;
    letter-spacing:1px;
    color:#727272;
    overflow-x:hidden !important;
}