jquerywordpressmobilescroll

Mobile Web site Wont Scroll Although Scrollbar is appearing

I am just building a new webs ite which is using a responsive WordPress theme.

The site URL is - www.render-box.co.uk/new/

The site looks fine to me when it scales down to mobile size, yet when viewing on a mobile I can't scroll down. The scrollbar is appearing at the side of the page.

It seems as if something is blocking the page from scrolling, and I'm not quite sure what?

Solution

  • Ok. If you inspect the code, there's a script that puts: "overflow:hidden" in the HTML Tag. (I guess it's because the custom scroll bar, actually it's the niceScroll plugin doing that and it's not for mobile).... So, you can make a script to override the nicescroll.

    I made this for you, this will check the UserAgent to detect if the user is on a mobile device and then, override the css rule of the html tag. Hope this works for you.

        $(function(){

        var movil=false;

        if( navigator.userAgent.match(/Android/i) || 
            navigator.userAgent.match(/webOS/i) ||
            navigator.userAgent.match(/iPhone/i) || 
            navigator.userAgent.match(/iPad/i)|| 
            navigator.userAgent.match(/iPod/i) || 
            navigator.userAgent.match(/BlackBerry/i)){

            var movil=true;

        }

        else{
            var movil=false
        }


        if(movil==true){

            // SET OVERFLOW TO AUTO, SO THE SCROLL IT'S ALLOWED

            $("html").css("overflow", "auto");

            //HIDE THE NICESCROLL FOR MOBILE DEVICES 

            $("#ascrail2000").css("display", "none");


        }

        else{}
    });

    Don't forget to put this on a tag on the end of the html, when the DOM is ready, so it will overwrite the css.