在移动设备屏幕上移除 'skrollr'

Question

我正在尝试删除移动设备（最大宽度 767 像素）屏幕上的 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

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

中的 javascript 初始化

我建议您删除 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);

Fiddle: http://jsfiddle.net/erfvgx85/2/（调整 "Result" 框架的大小来测试它）

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

我还认为只在一个地方调用 skrollr.init 更好 - 否则我们可能会忘记在另一个调用中传递相同的选项 (forceHeight: false)。（就像你的例子）

在移动设备屏幕上移除 'skrollr'

removing 'skrollr' on mobile screens

css

php

jquery-mobile

skrollr