javascript - 关闭 js 以提高响应能力

Question

我的网站上有一个 jQuery 插件滚动效果，我想在 740 像素以下的屏幕尺寸下关闭它。我找到了一篇与我的相似的帖子并尝试了他们在那里建议的内容，但它所做的只是完全关闭我的插件，无论屏幕大小如何。我不确定脚本的哪一部分出现故障。

这是脚本：

if(screen.width < 740) {
    return;
} else {
    $(function() {
        $.scrollify({
            section : "section",
        });
    });

    $.scrollify({
        section : "section",
        sectionName : "section-name",
        easing: "easeOutExpo",
        scrollSpeed: 1100,
        offset : 0,
        scrollbars: true,
        before:function() {},
        after:function() {},
        afterResize:function() {}
    });
}

有谁知道这有什么问题？

谢谢，丽莎

Answer 1

为什么你两次调用 $.scrollify 函数？顺便说一句，你能试试这个吗？

$(function() {
    if($(screen).width() >= 740){
        $.scrollify({
            section : "section",
            sectionName : "section-name",
            easing: "easeOutExpo",
            scrollSpeed: 1100,
            offset : 0,
            scrollbars: true,
            before:function() {},
            after:function() {},
            afterResize:function() {}
        });
    }
});

Answer 2

删除return这是一个语法错误并仅检查宽度> = 740：

if(screen.width >= 740) {
    $(function() {
        $.scrollify({
            section : "section",
        });
    });

    $.scrollify({
        section : "section",
        sectionName : "section-name",
        easing: "easeOutExpo",
        scrollSpeed: 1100,
        offset : 0,
        scrollbars: true,
        before:function() {},
        after:function() {},
        afterResize:function() {}
    });
}

Answer 3

您应该将整个代码包装到一个函数中以使该return;语句起作用。例如，您可以在文档准备好时执行代码：

<script>

$(document).ready(function(){
    if(screen.width < 740) {
        return;
    } else {
        $.scrollify({
            section : "section",
        });
        $.scrollify({
            section : "section",
            sectionName : "section-name",
            easing: "easeOutExpo",
            scrollSpeed: 1100,
            offset : 0,
            scrollbars: true,
            before:function() {},
            after:function() {},
            afterResize:function() {}
        });
    }
});

</script>