I am creating new web and need help with JavaScript. What I want is disable scrollify JS on mobile. Tried almost everything, not success.

Here is my code:

<script>
            $(function() {
                    $.scrollify({
                        section : ".pagescroll",
                        standardScrollElements: ".modal",
                    });
              $.scrollify.disable() // this function is for disable mobile
                });
</script>

Thank you

I am creating new web and need help with JavaScript. What I want is disable scrollify JS on mobile. Tried almost everything, not success.

Here is my code:

<script>
            $(function() {
                    $.scrollify({
                        section : ".pagescroll",
                        standardScrollElements: ".modal",
                    });
              $.scrollify.disable() // this function is for disable mobile
                });
</script>

Thank you

• javascript
• scroll

• How do you want to detect if a mobile device is using your code? – Jeroen Heier Commented Nov 27, 2016 at 12:48
• for example detect screen size < 600px – YakaMan Commented Nov 27, 2016 at 12:50
• Look at this SO question – Jeroen Heier Commented Nov 27, 2016 at 13:02
• Have you tried fullPage.js instead? It has multiple responsive options. – Alvaro Commented Jan 26, 2017 at 14:11

4 Answers 4

jQuery.scrollify({
    touchScroll: false
});

touchScroll: A boolean to define whether Scrollify handles touch scroll events. True by default.

Why don't you check if it's mobile using userAgent and regex like this

You can execute your script only if it's not mobile

if(!(/Android|webOS|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i.test(navigator.userAgent) )) { //if not these devices(userAgents)

  $(function() {
      $.scrollify({
          section : ".pagescroll",
          standardScrollElements: ".modal",
      });
  });

}

You can try the below snippet in mobile SO site also. It's working

if(!(/Android|webOS|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i.test(navigator.userAgent) )) { //if not these userAgents
  console.log("Not Mobile..!");
}else{
  console.log("This is Mobile");
}

check this code...

<script>
$(document).ready(function () {
    var width = $(window).width();
    var height = $(window).height();

    if (width > 980 && height > 500) {
        $(function () {
            $(".panel").css({
                "height": $(window).height()
            });
            $.scrollify({
                section: ".panel"
            });


            $(".scroll").click(function (e) {
                e.preventDefault();
                $.scrollify("move", $(this).attr("href"));
            });
        });

    } else {
        $(".scroll").click(function (e) {
            e.preventDefault();
        });
        $.scrollify.destroy();
    }
    $(window).resize(function () {
        width = $(window).width();
        height = $(window).height();
        $(function () {
            if (width > 980 && height > 500) {
                $(".panel").css({
                    "height": $(window).height()
                });
                $.scrollify({
                    section: ".panel"
                });


                $(".scroll").click(function (e) {
                    e.preventDefault();
                    $.scrollify("move", $(this).attr("href"));
                });
            } else {
                $.scrollify.destroy();
                $(".scroll").click(function (e) {
                    e.preventDefault();
                });

            }
        });
    });
});

$.scrollify({
 section : ".fullSec",
 scrollSpeed:2000,
 easing: "easeOutExpo",
 offset : 0,
 scrollbars: true,
 setHeights: true,
 updateHash: false,
 afterResize: function() {
 if( $(window).width() < 767) {
   $.scrollify.disable()
 }else{
   $.scrollify.enable()
 }
 },
});