在移动屏幕上删除'skrollr'

Question

I am trying to remove the skrollr functions on mobile (max width 767px) screen.

I have the following code that (it is assumed) to stop skrollr on mobile but it doesn't work (I have tried putting it in a seperate, enquened file and put it in the skrollr code itself, no change)

JAVA code

$(function () {
// initialize skrollr if the window width is large enough
if ($(window).width() > 767) {
skrollr.init(yourOptions);
}

// disable skrollr if the window is resized below 768px wide
$(window).on('resize', function () {
if ($(window).width() <= 767) {
skrollr.init().destroy(); // skrollr.init() returns the singleton created above
}
});
});

code at the bottom of footer.php (to make skrollr work)

<script type="text/javascript">
        skrollr.init({
        forceHeight: false
        });
    </script>

    <script type="text/javascript">
    //http://detectmobilebrowsers.com/ + tablets
    (function(a) {
         if(/android|avantgo|bada\ ... )
     {
        //Add skrollr mobile on mobile devices.
        document.write('<script type="text/javascript" src="js/skrollr.mobile.min.js"><\/script>');
     }
    })(navigator.userAgent||navigator.vendor||window.opera);
</script>

Answer 1

You are initializing skrollr in the footer.php regardless of the current window width. The condition in line 3 of your JAVASCRIPT file - if ($(window).width() > 767) { - does work, but skrollr is already initialized at this point by the javascript in your footer.php

I would recommend you to remove the initialization of skrollr in the footer.php file and modify your javascript code to something like this:

(function($) {
    $(function () {
        var skrollrInstance;
        var onResize = function () {
            var isMobile = $(window).width() <= 767;
            if (!skrollrInstance && !isMobile) {
                skrollrInstance = skrollr.init({
                    forceHeight: false
                });
            } else if(skrollrInstance && isMobile) {
                skrollrInstance.destroy();
                skrollrInstance = null;
            }
        };
        $(window).on('resize', onResize);
        onResize();
    });
})(jQuery);

Fiddle: http://jsfiddle.net/erfvgx85/2/ (resize the "Result" frame to test it)

I have stored the current skrollrInstance in a separate variable. As you have commented, "// skrollr.init() returns the singleton (instance) created above", but it could be a performance issue if skrollr isn't initialized or already destroyed at this moment.

I also think that it's nicer to just have one place for the call of skrollr.init - otherwise we could forget to pass the same options (forceHeight: false) in another call. (like in your example)