即使导入脚本也找不到 Scrollify 函数

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

Uncaught TypeError: $.scrollify is not a function

我已经加载插件脚本afterjQuery 本身会加载，配置代码也会在这两个加载之后加载，甚至我将插件的脚本标签和配置代码放在页面的最末尾。</body>.

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

我在使用其他脚本时也遇到过此类问题，它们总是由于加载顺序造成的，但我在这里遇到了困难。有什么帮助吗？

因此，我正在 October CMS 中构建自定义主题，我希望在遇到相同错误之前使用 rollify。经过一番努力，切换 JQuery 版本并移动功能，我注意到我的问题与使用 Laravel Mix/Webpack 导入滚动代码有关。我在 main.js 文件的顶部需要它，但代码本身是在之后加载的。

我的解决方案是使用一些 October twig 函数在 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 https://octobercms.com/docs/markup/tag-scripts

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