将 Skrollr 和 SkrollrMenu 与 RequireJS 结合使用

Using Skrollr and SkrollrMenu with RequireJS

本文关键字：结合 RequireJS Skrollr SkrollrMenu      更新时间：2023-09-26

我在使用 RequireJS 使用 skrollr 和 skrollrMenu 时遇到错误。这是我的主要.js文件：

require.config({
    paths: {
        jquery: '../bower_components/jquery/jquery',
        skrollr: '../bower_components/skrollr/src/skrollr',
        skrollrMenu: '../bower_components/skrollr-menu/src/skrollr.menu'
    },
    shim: {
        skrollrMenu: {
            deps: ['skrollr']
        }
    }
});
require(['app', 'jquery', 'skrollr', 'skrollrMenu'], function (app, $) {
    'use strict';
    window.onload = function() {
        var s = skrollr.init();
        console.log(s);
        // //The options (second parameter) are all optional. The values shown are the default values.
        skrollr.menu.init(s, {
            //skrollr will smoothly animate to the new position using `animateTo`.
            animate: true,
            //The easing function to use.
            easing: 'sqrt',
            //How long the animation should take in ms.
            duration: function(currentTop, targetTop) {
                //By default, the duration is hardcoded at 500ms.
                return 500;
                //But you could calculate a value based on the current scroll position (`currentTop`) and the target scroll position (`targetTop`).
                //return Math.abs(currentTop - targetTop) * 10;
            },
        });
    }
});

当我加载页面时，我在 skrollr.menu 文件中收到错误Uncaught TypeError: Cannot call method 'relativeToAbsolute' of undefined：

targetTop = _skrollrInstance.relativeToAbsolute(scrollTarget, 'top', 'top');

然后是console.log(s)的输出。这是否意味着skrollr.menu.init在console.log(s)之前运行？

更新到 skrollr-menu 0.1.6（我猜你运行的是 0.1.5）。

相关文章：