How to disable scrollify.js on mobile

Question

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

How do you want to detect if a mobile device is using your code? — Jeroen Heier, Nov 27 '16 at 12:48
Look at [this](http://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window) SO question — Jeroen Heier, Nov 27 '16 at 13:02
Have you tried [fullPage.js](http://alvarotrigo.com/fullPage/) instead? It has multiple responsive options. — Alvaro, Jan 26 '17 at 14:11

score 2 · Answer 1 · edited Aug 27 '18 at 06:42

2

jQuery.scrollify({
    touchScroll: false
});

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

edited Aug 27 '18 at 06:42

Suraj Rao

29,388
11
94
103

answered Aug 27 '18 at 06:38

Lastron

21
2

Jyothi Babu Araja · Answer 2 · 2016-11-28T06:05:54.653

1

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");
}

edited Nov 28 '16 at 06:05

answered Nov 27 '16 at 13:00

Jyothi Babu Araja

10,076
3
31
38

Looking at the userAgent is not a very good idea; it is not reliable and must be maintained. – Jeroen Heier Nov 27 '16 at 13:02
need a help because I am newbie in JavaScript functions. Thank you – YakaMan Nov 27 '16 at 13:27
tried and not working. Any other solution? thank you – YakaMan Nov 27 '16 at 16:09
`if(!(/Android|webOS|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i.test(navigator.userAgent) )) { //if not these userAgents $(function() { $.scrollify({ section : ".pagescroll", standardScrollElements: ".modal", }); }); }else{ $.scrollify.disable(); }` – YakaMan Nov 28 '16 at 23:15
The problem is that, when I use the `$.scrollify.disable()` I can not roll page up and down. It is disabling whole web. I think this function disable the whole scroll. But I want only turn off scrollify.js. Maybe it is need to be enabled back somehow. – YakaMan Nov 28 '16 at 23:24
Try removing `else` part of your code. i.e don't disable `scrollify` which means we're not initialising in Mobile – Jyothi Babu Araja Nov 29 '16 at 05:31

score 0 · Answer 3 · answered Sep 10 '17 at 06:19

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();
                });

            }
        });
    });
});

Welcome to SO. When posting an answer, please include comments explaining what was the issue and how your code resolves it. — Fejs, Sep 10 '17 at 06:54

score 0 · Answer 4 · answered Feb 10 '20 at 07:08

$.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()
 }
 },
});

How to disable scrollify.js on mobile

4 Answers4

Linked