关闭 js 以提高响应能力

Question

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

这是脚本：

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

删除语法错误的 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 2

您应该将整个代码包装到一个函数中，以使 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>

Answer 3

为什么调用 $.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() {}
        });
    }
});

关闭 js 以提高响应能力

Turning off js for responsiveness

html

javascript

jquery

responsive-design

jquery-scrollify