移除移动屏幕上的“skrollr”

Question

我试图删除移动(最大宽度767 max)屏幕上的skrollr函数。

我有以下代码(假设)可以在移动上停止skrollr，但它不起作用(我尝试将它放在单独的、封闭的文件中，并将其放入skrollr代码本身，没有任何更改)

JAVA代码

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

footer.php底部的代码(使skrollr工作)

<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

无论当前窗口的宽度如何，您都要在footer.php中初始化斯克罗尔。您的JAVASCRIPT文件第3行中的条件-- if ($(window).width() > 767) { --确实有效，但footer.php中的javascript已经在此时初始化了skrollr。

我建议您删除footer.php文件中skrollr的初始化，并将javascript代码修改为如下所示：

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

http://jsfiddle.net/erfvgx85/2/ (调整“结果”框架的大小以测试它)

我已经将当前的skrollrInstance存储在一个单独的变量中。正如您已经评论过的那样，"// skrollr.init()返回上面创建的单例(实例)“，但是如果此时skrollr未初始化或已经销毁，则可能会导致性能问题。

我还认为，最好有一个地方来调用skrollr.init，否则我们可能会忘记在另一个调用中传递相同的选项(forceHeight: false)。(如你的例子)