即使导入脚本，也找不到滚动函数

Scrollify function not being found even when script is imported

本文关键字：找不到 滚动 函数 导入 脚本      更新时间：2023-09-26

所以我试图使用Scrollify，这是一个jQuery插件滚动捕捉。我已经导入jQuery没有问题，但无论我如何导入插件本身，我得到错误:

Uncaught TypeError: $.scrollify is not a function

我有插件脚本加载后 jQuery本身加载，并在这两个加载后的配置代码，甚至到了我把插件的脚本标签和配置代码在</body>之前的页面的末尾。

我已经尝试在本地托管插件脚本，我尝试使用CDN。

我在其他脚本中遇到过这些问题，它们总是由于加载顺序，但我在这里被难住了。任何帮助吗?

所以我在十月cms中构建一个自定义主题，我在遇到相同的错误之前使用scrollify。经过大量的挣扎，切换JQuery版本和移动函数，我注意到我的问题与使用Laravel Mix/Webpack导入滚动代码有关。我把它放在main.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

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

试着把你的脚本放在代码的底部。

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

尝试这样使用

jQuery(document).ready(function($) {
    $.scrollify({
       ...
    });
});

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

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

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

确保脚本位于结束正文标签的正前方

相关文章：