Skip to content
This repository has been archived by the owner on Jan 24, 2018. It is now read-only.

Natural scrolling duration #10

Open
Harti opened this issue Jul 9, 2013 · 1 comment
Open

Natural scrolling duration #10

Harti opened this issue Jul 9, 2013 · 1 comment

Comments

@Harti
Copy link

Harti commented Jul 9, 2013

Heya! I really like your skrollr project but I felt there was something amiss (like #9). So I coded it. Unfortunately I'm really awkward at using git so I'll just paste the feature request code here and you can do with it what you want.

What it does is take the current distance between your positionY and the target into account, then calculate an appropriate transition speed. "Appropriate" as in: "don't scroll at ultra lightning speed when scrolling to distant elements; but also don't take ages". This is achieved by sqrt(), and a magic number that felt right (25).

var handleLink = function(link, fake) {
        //Don't use the href property (link.href) because it contains the absolute url.
        var href = link.getAttribute('href');

        //Check if it's a hashlink.
        if(!/^#/.test(href)) {
            return false;
        }

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

        //If there's a data-menu-top attribute, it overrides the actuall anchor offset.
        var menuTop = link.getAttribute(MENU_TOP_ATTR);

        if(menuTop !== null) {
            targetTop = +menuTop;
        } else {
            var scrollTarget = document.getElementById(href.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(window.pageYOffset) {
                var currentYOffset = pageYOffset;
            } else {
                var currentYOffset = document.body.scrollTop;
            }
            var distanceY = Math.abs(currentYOffset - targetTop),
            naturalDuration = Math.sqrt(distanceY) * 25;

        }

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

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

        return true;
    };

Best regards,

Harti

@Prinzhorn
Copy link
Owner

Am I right that, if #9 gets included, you can just do these calculations outside of skrollr-menu?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants