Question

所以我正在尝试使用Scrollify，这是一个用于滚动捕捉的jQuery插件。我有jQuery导入没问题，但无论我如何导入插件本身，我都得到错误：

Uncaught TypeError: $.scrollify is not a function

我在 jQuery本身加载之后加载的插件脚本，以及在这两个加载之后的配置代码，甚至到我将插件的脚本标记和配置代码放在最后的位置</body>之前的页面。

我尝试在本地托管插件脚本，我尝试使用CDN。两者都给出了同样的问题。

我遇到过其他脚本的这类问题，而且总是由于加载顺序，但我在这里难倒。有什么帮助吗？

Answer 1

因此，我正在OctoberCMS中构建自定义主题，并且在遇到相同错误之前，我希望使用scrollify。经过很多努力，切换了JQuery版本并移动了函数，我注意到我的问题与使用Laravel Mix / Webpack导入scrollify代码有关。我在主体顶部有此要求。 js文件，但代码本身是在加载之后。

我的解决方案是使用某些十月份的树枝函数在JQuery之后手动加载代码。

// These get loaded first
<script src="{{ [
    'assets/js/app.js', // My JQuery gets loaded here
    'assets/js/vue.js'  // Other JS for the website
    ]|theme }}"></script>
// Scripts in here injected into page by the {% scripts %} tag after, having the 
// scrollify.js in the array above or outside the {% put scripts %} tag would always throw
// $.scrollify is not a function error 
{% put scripts %}
<script src="{{ 'assets/js/scrollify.js'|theme }}"></script>
<script>
    $(document).ready(function () {
        $.scrollify({
            section: ".example-section",
        });
    });
</script>
{% endput %}
{% scripts %}

{％scripts％}标签插入对脚本的JavaScript文件引用由应用程序注入。 https://octobercms.com/docs/markup/tag-scripts

正如上面提到的答案，需要在页面和Jquery加载后才加载Scrollify，但是如果您使用的是Webpack或同等功能，我建议您在浏览器中检查已编译的脚本，并确保顺序正确。

Answer 2

尝试将脚本放在代码的底部。

...
<script>
        $(function(){
            $.scrollify({
                ...
            });
        });
    </script>
</body>

Answer 3

尝试以这种方式使用

jQuery(document).ready(function($) {

    $.scrollify({
       ...
    });

});

Answer 4

该错误背后的原因是，在文档加载完成后，Scrollify脚本应初始化。因此，解决方案是将其移到最后

将这两行移动到body标签的末尾，如下所示：

<body>
..
..
..
<script src="..\js\Scrollify\jquery.scrollify.js"></script>
<script>
    $(document).ready(function() {
        $.scrollify({
            section : ".sectionalScrolling",
        });
    });
</script>
</body>

确保脚本恰好在结束body标签之前。

即使导入脚本，也无法找到Scrollify功能

4 个答案: