我正在使用Skrollr菜单通过以下按钮对页面上的动画进行动画处理

的HTML

<a href="#End"><div class="trigger-scroll left">&gt;</div></a>
... the page i want to reveal, using scrolling ...
<section id="End" class="scroll-here">
    <div class="hsContainer bottom"></div>
</section>

的JavaScript

var s = skrollr.init();

skrollr.menu.init(s, {
    animate: true,
    //How long the animation should take in ms.
    duration: function(currentTop, targetTop) {
        //By default, the duration is hardcoded at 500ms.
        return 18000;

        //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;
    },

    //This event is triggered right before we jump/animate to a new hash.
    change: function(newHash, newTopPosition) {
        //Do stuff
    },

    //Add hash link (e.g. `#foo`) to URL or not.
    updateUrl: false //defaults to `true`.
});

当我单击该按钮时会发生作用,这不是问题。

问题在于,随着skrollr菜单使页面动画化,它似乎会改变速度。 它开始得很快,这意味着页面上的前几个元素(大约前2000px)会闪过而无法读取。 然后速度均匀,直到最后的3000px(大约)为止,此时skrollr-menu非常慢。 我想要的是单击按钮的方式类似于按住键盘或滚动侧栏上的向下箭头,默认情况下,似乎skrollr-menu不起作用。

我尝试使用数学方程式更改速度,但是无论我尝试如何,问题仍然存在,并且似乎没有任何“简单”的方法来更改加速速度,而且我怀疑问题出在Skrollr内.menu.js文件,但是我看不到哪里。

有什么方法可以使滚动速度均匀,而不是开始时快而结束时慢?

注意:我对JavaScript或jQuery不太了解,所以我可能忽略了一些简单的事情。

github上的skrollr菜单https://github.com/Prinzhorn/skrollr-menu

Skrollr.menu.js

 /*!
 * Plugin for skrollr.
 * This plugin makes hashlinks scroll nicely to their target position.
 *
 * Alexander Prinzhorn - https://github.com/Prinzhorn/skrollr
 *
 * Free to use under terms of MIT license
 */
(function(document, window) {
    'use strict';

    var DEFAULT_DURATION = 500;
    var DEFAULT_EASING = 'sqrt';
    var DEFAULT_SCALE = 1;

    var MENU_TOP_ATTR = 'data-menu-top';
    var MENU_OFFSET_ATTR = 'data-menu-offset';
    var MENU_DURATION_ATTR = 'data-menu-duration';
    var MENU_IGNORE_ATTR = 'data-menu-ignore';

    var skrollr = window.skrollr;
    var history = window.history;
    var supportsHistory = !!history.pushState;

    /*
        Since we are using event bubbling, the element that has been clicked
        might not acutally be the link but a child.
    */
    var findParentLink = function(element) {
        //We reached the top, no link found.
        if(element === document) {
            return false;
        }

        //Yay, it's a link!
        if(element.tagName.toUpperCase() === 'A') {
            return element;
        }

        //Maybe the parent is a link.
        return findParentLink(element.parentNode);
    };

    /*
        Handle the click event on the document.
    */
    var handleClick = function(e) {
        //Only handle left click.
        if(e.which !== 1 && e.button !== 0) {
            return;
        }

        var link = findParentLink(e.target);

        //The click did not happen inside a link.
        if(!link) {
            return;
        }

        if(handleLink(link)) {
            e.preventDefault();
        }
    };

    /*
        Handles the click on a link. May be called without an actual click event.
        When the fake flag is set, the link won't change the url and the position won't be animated.
    */
    var handleLink = function(link, fake) {
        var hash;

        //When complexLinks is enabled, we also accept links which do not just contain a simple hash.
        if(_complexLinks) {
            //The link points to something completely different.
            if(link.hostname !== window.location.hostname) {
                return false;
            }

            //The link does not link to the same page/path.
            if(link.pathname !== document.location.pathname) {
                return false;
            }

            hash = link.hash;
        } else {
            //Don't use the href property (link.href) because it contains the absolute url.
            hash = link.getAttribute('href');
        }

        //Not a hash link.
        if(!/^#/.test(hash)) {
            return false;
        }

        //The link has the ignore attribute.
        if(!fake && link.getAttribute(MENU_IGNORE_ATTR) !== null) {
            return false;
        }

        //Now get the targetTop to scroll to.
        var targetTop;

        var menuTop;

        //If there's a handleLink function, it overrides the actual anchor offset.
        if(_handleLink) {
            menuTop = _handleLink(link);
        }
        //If there's a data-menu-top attribute and no handleLink function, it overrides the actual anchor offset.
        else {
            menuTop = link.getAttribute(MENU_TOP_ATTR);
        }

        if(menuTop !== null) {
            //Is it a percentage offset?
            if(/p$/.test(menuTop)) {
                targetTop = (menuTop.slice(0, -1) / 100) * document.documentElement.clientHeight;
            } else {
                targetTop = +menuTop * _scale;
            }
        } else {
            var scrollTarget = document.getElementById(hash.substr(1));

            //Ignore the click if no target is found.
            if(!scrollTarget) {
                return false;
            }

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

            var menuOffset = scrollTarget.getAttribute(MENU_OFFSET_ATTR);

            if(menuOffset !== null) {
                targetTop += +menuOffset;
            }
        }

        if(supportsHistory && _updateUrl && !fake) {
            history.pushState({top: targetTop}, '', hash);
        }

        var menuDuration = parseInt(link.getAttribute(MENU_DURATION_ATTR), 10);
        var animationDuration = _duration(_skrollrInstance.getScrollTop(), targetTop);

        if(!isNaN(menuDuration)) {
            animationDuration = menuDuration;
        }

        //Trigger the change if event if there's a listener.
        if(_change) {
            _change(hash, targetTop);
        }

        //Now finally scroll there.
        if(_animate && !fake) {
            _skrollrInstance.animateTo(targetTop, {
                duration: animationDuration,
                easing: _easing
            });
        } else {
            defer(function() {
                _skrollrInstance.setScrollTop(targetTop);
            });
        }

        return true;
    };

    var jumpStraightToHash = function() {
        if(window.location.hash && document.querySelector) {
            var link = document.querySelector('a[href="' + window.location.hash + '"]');

            if(!link) {
                // No link found on page, so we create one and then activate it
                link = document.createElement('a');
                link.href = window.location.hash;
            }

            handleLink(link, true);
        }
    };

    var defer = function(fn) {
        window.setTimeout(fn, 1);
    };

    /*
        Global menu function accessible through window.skrollr.menu.init.
    */
    skrollr.menu = {};
    skrollr.menu.init = function(skrollrInstance, options) {
        _skrollrInstance = skrollrInstance;

        options = options || {};

        _easing = options.easing || DEFAULT_EASING;
        _animate = options.animate !== false;
        _duration = options.duration || DEFAULT_DURATION;
        _handleLink = options.handleLink;
        _scale = options.scale || DEFAULT_SCALE;
        _complexLinks = options.complexLinks === true;
        _change = options.change;
        _updateUrl = options.updateUrl !== false;

        if(typeof _duration === 'number') {
            _duration = (function(duration) {
                return function() {
                    return duration;
                };
            }(_duration));
        }

        //Use event bubbling and attach a single listener to the document.
        skrollr.addEvent(document, 'click', handleClick);

        if(supportsHistory) {
            skrollr.addEvent(window, 'popstate', function(e) {
                var state = e.state || {};
                var top = state.top || 0;

                defer(function() {
                    _skrollrInstance.setScrollTop(top);
                });
            }, false);
        }

        jumpStraightToHash();
    };

    //Expose the handleLink function to be able to programmatically trigger clicks.
    skrollr.menu.click = function(link) {
        //We're not assigning it directly to `click` because of the second ("private") parameter.
        handleLink(link);
    };

    //Private reference to the initialized skrollr.
    var _skrollrInstance;

    var _easing;
    var _duration;
    var _animate;
    var _handleLink;
    var _scale;
    var _complexLinks;
    var _change;
    var _updateUrl;

    //In case the page was opened with a hash, prevent jumping to it.
    //http://stackoverflow.com/questions/3659072/jquery-disable-anchor-jump-when-loading-a-page
    defer(function() {
        if(window.location.hash) {
            window.scrollTo(0, 0);
        }
    });
}(document, window));

===============>>#1 票数:0

问题是在这里找到了缓动功能

//Now finally scroll there.
        if(_animate && !fake) {
            _skrollrInstance.animateTo(targetTop, {
                duration: animationDuration,
                easing: _easing
            });
        } else {
            defer(function() {
                _skrollrInstance.setScrollTop(targetTop);
            });
        }

        return true;

似乎,即使Skrollr声明缓动的默认设置为线性(不缓动),但默认设置实际上设置为sqrt(或者至少在我的情况下如此)。 可以通过在skrollr.menu.init中将缓动强制为线性来解决该问题,或更改skrollr.menu.js文件以从函数中消除缓动来解决该问题。 这两种解决方案中的第一种是较干净的,以后不会引起问题。

skrollr.menu.init(s, {
    duration: function(currentTop, targetTop) {return 20000;},
    easing: 'linear'
});

  ask by Spratters53 translate from so

未解决问题?本站智能推荐:

1回复

无法更改skrollr菜单滚动速度(持续时间)

我正在尝试在我的网站中实现skrollr-menu。 我想要做的是单击按钮时向下滚动到最底端(我的工作正常。问题是,无论我做什么,我都无法使其慢于500ms。我就像描述中所建议的那样,尝试更改所包含代码中的持续时间,但这是行不通的。无论我做什么,无论是更改jQuery中的持续时间,还是尝试通过
2回复

如何使skrollr.js与Turbolinks一起使用

当您返回带有Turbolink的页面时,Skrollr.js似乎停止工作。 如果您再次手动刷新页面或通过data-no-turbolink链接转到页面,则效果很好。 我尝试使用所有可能的方式调用该函数,但仍然没有运气,主要是: 这里有一个类似的问题,但是可以接受的答案是您应该只禁
2回复

Skrollr不在移动设备上工作

所以这似乎是一个常见的问题 ,但是没有一个答案给我带来任何快乐。 我已经完全阅读了Skrollr文档 ,可以得出结论,我完全不知所措。 我的基本html标记: <html> <head> <!-- Head Stuff -->
3回复

Skrollr添加空白区域

我尝试了一切。 我在谷歌上阅读4-5页试图找到适合我的修复程序时感到筋疲力尽。 即使我使用skrollr示例(不是说他们做错了,我知道我只是不理解它),我的问题仍然存在。 所以我上传了一个演示,仅在移动设备上显示这个尴尬的白色空间。 它可以在桌面上正常工作,如果您尝试,您将会看到。
2回复

了解Skrollr数据值

我试图理解Skrollr javascript脚本库,并且很难理解数据值,以及它们在绝对值和相对值之间的区别。 我在div上有一个背景图像(大约比div高2倍),当我向下滚动页面时,我想向下滚动。 这是我到目前为止所拥有的。 什么是数据顶部和数据底部? 尽管我可以从文档中看到,
1回复

在iframe中运行Skrollr

我试图在IFrame中运行一些非常简单的Skrollr动画。 当我用简单的HTML Skrollr填充IFrame时,将错误输出到控制台(在FireFox中): “格式不正确” 我已经确认IFrame内容是正确的,并且如果它们不在iframe和标准网页中也可以正常运行。 而且我已
1回复

Skrollr褪色文本将不起作用,但所有其他skrollr元素均起作用

在我网站的某些元素上使用skrollr时遇到一些问题。 它适用于背景,但是我试图淡入和淡出带有文本的div,它将无法正常工作。我必须做错了什么,所以我创建了一个jsfiddle来显示问题。 希望有人对我做错了。 HTML代码 的CSS 这里的例子 谢谢
1回复

Skrollr转换功能导致文本颤动

使用skrollr.js我要在另一个div的内部div上做一些过渡效果。 内部div是相对定位的。 我的密码是 HTML结构 问题是在滚动时( h1 )在垂直方向上会产生很大的颤抖,怎么办?
2回复

Skrollr-是否可以使用Sprite并更改滚动位置?

我有一个背景图像,其中有4个角色在不同步行位置的图像。 使用Skrollr滚动时是否可以每0.5秒移动精灵位置(假设在x坐标上移动150px)? 想要给它一个步行的效果,但是只能在滚动上。 也许还有另一种方法可以达到这种效果? 非常热衷于仅使用Skrollr,因为我过去曾经使用过
1回复

使用skrollr在固定图像背景的同时“冻结”滚动

我有这个小提琴http://jsfiddle.net/azzy588u/12/#我需要您在第二个合成器中看到的滚动“暂停”,但我想具有视差效果,即位置固定且图像滚动固定在此网站上: https : //ihatetomatoes.net/demos/simple-parallax-scrolli