AngularJS – $anchorScroll glatt/Dauer

Lesezeit: 5 Minuten

Benutzer-Avatar
da ich bin

Lesen der AngularJS-Dokumentation Ich habe nicht herausgefunden, ob $anchorScroll kann eine Dauer-/Beschleunigungsoption haben, um das Scrollen zu Elementen zu glätten.

Es heißt nur:

$location.hash('bottom');

// call $anchorScroll()
$anchorScroll();

Ich benutze jquery nicht und will es auch nicht; Gibt es noch eine clevere und dennoch einfache Möglichkeit, sie zu erstellen oder zu erweitern? $anchorScroll um das Scrollen flüssiger zu machen?

Benutzer-Avatar
Brett DeWoody

Leider ist dies nicht möglich $anchorScroll. Wie Sie festgestellt haben $anchorScroll hat keine Optionen und funktioniert nicht mit $ngAnimate. Um die Schriftrolle zu animieren, müssten Sie Ihren eigenen Dienst / Ihre eigene Fabrik oder einfach nur Javascript verwenden.

Zum Selbstlernen habe ich ein Beispiel mit einem Smooth-Scrolling-Service zusammengestellt. Es gibt wahrscheinlich bessere Möglichkeiten, dies zu tun, daher ist jedes Feedback erwünscht.

So scrollen Sie zu einem Element, das Sie anhängen a ng-click="gotoElement(ID)" zu jedem Element. Ich denke, ein noch besserer Weg wäre, daraus eine Richtlinie zu machen.

Hier ist die Arbeitsbeispiel auf jsFiddle.

Aktualisieren

Es gibt jetzt eine Reihe von Richtlinien von Drittanbietern, um dies zu erreichen.

Sie können auch den eckigen Scroll verwenden, Link “https://github.com/durated/angular-scroll/“. Es ist ein reibungsloses Scrollen und einige Beschleunigungsfunktionen, um ein professionelles Aussehen zu erzielen.

  • Funktioniert dieses Plugin mit anderen Elementen außer $documents? Ich habe versucht, scrollToElement auf ein div anzuwenden, damit ich eine Zeile darin in die Ansicht scrollen kann, und es hat nicht funktioniert.

    – Schaunak

    13. Januar 2015 um 22:31 Uhr

Die Antwort von Brett hat bei mir super funktioniert. Ich habe einige kleine Änderungen an seiner Lösung in Bezug auf Modularisierung und Testbarkeit vorgenommen.

Hier ist noch ein weiteres Arbeitsbeispiel auf JsFiddle das schließt die andere Version mit dem Testen ein.

Zum Testen verwende ich Karma und Jasmine. Die Signatur wurde wie folgt leicht geändert:

 anchorSmoothScroll.scrollTo(elementId, speed);

Dabei ist element ein obligatorisches Attribut, zu dem gescrollt werden muss, und die Geschwindigkeit ist optional, wobei der Standardwert 20 ist (wie zuvor).

Sie können auch ngSmoothScroll verwenden, Link: https://github.com/d-oliveros/ngSmoothScroll.

Fügen Sie einfach die hinzu smoothScroll Modul als Abhängigkeit und verwenden Sie es wie folgt:

<a href="#" scroll-to="my-element-3">Click me!</a>

Keine der Lösungen hier tut tatsächlich das, was OP ursprünglich verlangt hat, nämlich zu machen $anchorScroll reibungslos scrollen. Unterschied zwischen Smooth-Scrolling-Direktiven und $anchroScroll ist, dass es verwendet/modifiziert $location.hash()was in einigen Fällen wünschenswert sein kann.

Hier ist das Wesentliche für ein einfaches Modul, das $anchorScroll-Scrolling durch Smooth-Scrolling ersetzt. Es verwendet https://github.com/oblador/angular-scroll Bibliothek für das Scrollen selbst (ersetzen Sie es durch etwas anderes, wenn Sie möchten, es sollte einfach sein).

https://gist.github.com/mdvorak/fc8b531d3e082f3fdaa9
Hinweis: Es bringt $anchorScroll tatsächlich nicht dazu, reibungslos zu scrollen, aber es ersetzt seinen Handler für das Scrollen.

Aktivieren Sie es einfach durch Referenzieren mdvorakSmoothScroll Modul in Ihrer Anwendung.

Benutzer-Avatar
Vermietung.com

Alan, danke. Falls es jemanden interessiert, ich habe es nach den Standards von John Pappa formatiert.

(function() {

'use strict';
var moduleId = 'common';
var serviceId = 'anchorSmoothScroll';

angular
    .module(moduleId)
    .service(serviceId, anchorSmoothScroll);

anchorSmoothScroll.$inject = ['$document', '$window'];

function anchorSmoothScroll($document, $window) {

    var document = $document[0];
    var window = $window;

    var service = {
        scrollDown: scrollDown,
        scrollUp: scrollUp,
        scrollTo: scrollTo,
        scrollToTop: scrollToTop
    };
    return service;

    function getCurrentPagePosition(currentWindow, doc) {
        // Firefox, Chrome, Opera, Safari
        if (currentWindow.pageYOffset) return currentWindow.pageYOffset;
        // Internet Explorer 6 - standards mode
        if (doc.documentElement && doc.documentElement.scrollTop)
            return doc.documentElement.scrollTop;
        // Internet Explorer 6, 7 and 8
        if (doc.body.scrollTop) return doc.body.scrollTop;
        return 0;
    }

    function getElementY(doc, element) {
        var y = element.offsetTop;
        var node = element;
        while (node.offsetParent && node.offsetParent !== doc.body) {
            node = node.offsetParent;
            y += node.offsetTop;
        }
        return y;
    }

    function scrollDown(startY, stopY, speed, distance) {

        var timer = 0;

        var step = Math.round(distance / 25);
        var leapY = startY + step;

        for (var i = startY; i < stopY; i += step) {
            setTimeout('window.scrollTo(0, ' + leapY + ')', timer * speed);
            leapY += step;
            if (leapY > stopY) leapY = stopY;
            timer++;
        }
    };

    function scrollUp(startY, stopY, speed, distance) {

        var timer = 0;

        var step = Math.round(distance / 25);
        var leapY = startY - step;

        for (var i = startY; i > stopY; i -= step) {
            setTimeout('window.scrollTo(0, ' + leapY + ')', timer * speed);
            leapY -= step;
            if (leapY < stopY) leapY = stopY;
            timer++;
        }
    };

    function scrollToTop(stopY) {
        scrollTo(0, stopY);
    };

    function scrollTo(elementId, speed) {

        var element = document.getElementById(elementId);

        if (element) {
            var startY = getCurrentPagePosition(window, document);
            var stopY = getElementY(document, element);

            var distance = stopY > startY ? stopY - startY : startY - stopY;

            if (distance < 100) {
                this.scrollToTop(stopY);

            } else {

                var defaultSpeed = Math.round(distance / 100);
                speed = speed || (defaultSpeed > 20 ? 20 : defaultSpeed);

                if (stopY > startY) {
                    this.scrollDown(startY, stopY, speed, distance);
                } else {
                    this.scrollUp(startY, stopY, speed, distance);
                }
            }

        }

    };

};

})();

Benutzer-Avatar
Deepak Thomas

Mir ist nicht bekannt, wie man animiert $anchorScroll . So mache ich es in meinen Projekten:

/* Scroll to top on each ui-router state change */
$rootScope.$on('$stateChangeStart', function() {
 scrollToTop();
});

Und die JS-Funktion:

function scrollToTop() {
    if (typeof jQuery == 'undefined') {
        return window.scrollTo(0,0);
    } else {
        var body = $('html, body');
        body.animate({scrollTop:0}, '600', 'swing');
    }
    log("scrollToTop");
    return true;
}

1229470cookie-checkAngularJS – $anchorScroll glatt/Dauer

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy