javascript - 即使导入脚本也找不到滚动功能

Question

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

Uncaught TypeError: $.scrollify is not a function

我在 jQuery 本身加载后 加载了插件脚本，并且在这两个加载之后加载了配置代码，甚至我将插件的脚本标记和配置代码放在了</body>之前的页面.

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

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

Answer 1

所以我在 OctoberCMS 中构建了一个自定义主题，在遇到同样的错误之前我希望使用 scrollify。经过大量的努力、切换 JQuery 版本和移动函数之后，我注意到我的问题与使用 Laravel Mix/Webpack 导入 scrollify 代码有关。我在 main.js 的顶部需要它。 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 %}

The {% scripts %} tag inserts JavaScript file references to scripts injected by the application. https://octobercms.com/docs/markup/tag-scripts

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