AngularJS - $ लंगर चिकनी / अवधि

Question

AngularJS डॉक्स पढ़ना मुझे पता नहीं लगा है कि $anchorScrollतत्वों को सुचारू करने के लिए एक अवधि / सहजता विकल्प हो सकता है।

यह केवल कहता है:

$location.hash('bottom');

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

मैं jquery का उपयोग नहीं करता और नहीं करना चाहता; $anchorScrollस्क्रॉलिंग को और अधिक सुचारू बनाने के लिए अभी भी एक चतुर और सरल तरीका है ?

Answer 1

दुर्भाग्य से यह संभव नहीं है $anchorScroll। जैसा कि आपने पाया $anchorScrollकि कोई विकल्प नहीं है और साथ काम नहीं करता है$ngAnimate । स्क्रॉल को चेतन करने के लिए आपको अपनी स्वयं की सेवा / फैक्टरी या सीधे जावास्क्रिप्ट का उपयोग करने की आवश्यकता होगी।

आत्म-शिक्षा के लिए मैंने एक चिकनी स्क्रॉल सेवा के साथ एक उदाहरण रखा। ऐसा करने के लिए शायद बेहतर तरीके हैं, इसलिए किसी भी प्रतिक्रिया को प्रोत्साहित किया जाता है।

एक तत्व को स्क्रॉल करने के लिए आप ng-click="gotoElement(ID)"किसी भी तत्व को संलग्न करते हैं । मुझे लगता है कि इसे बेहतर बनाने के लिए एक बेहतर मार्ग होगा।

यहाँ jsFiddle पर काम कर उदाहरण है ।

अपडेट करें

इसे पूरा करने के लिए अब कई तीसरे पक्ष के निर्देश हैं।

• https://github.com/oblador/angular-scroll ।
• https://github.com/d-oliveros/ngSmoothScroll
• https://github.com/arnaudbreton/angular-smoothscroll
• https://gist.github.com/justinmc/d72f38339e0c654437a2

Comments

बहुत अच्छा। यहाँ यह एक निर्देश के रूप में है: gist.github.com/justinmc/d72f38339e0c654437a2

— जस्टिन

@JustinMcCandless आप अपने निर्देश को कैसे कहते हैं? मैंने कोशिश की है: <a ng-click="anchor-smooth-school('about');"> लगभग 1 </a> <a ng-click="anchorSmoothScroll('about');"> लगभग 2 < / ए>

— दान

@ केवल कर सकते हैं<a anchor-smooth-scroll>About 1</a> <a anchor-smooth-scroll>About 2</a>

— जस्टिन

अच्छा, मुझे यह जवाब पसंद है। लेकिन यह अभी भी AngularJS से नफरत करने के लिए एक और कारण जोड़ता है, मेरा मतलब है, JQuery

— स्क्रॉलटॉ

निर्देश का उपयोग करने के लिए, एक आईडी (जैसे <div id="my-div">my div</div>) के साथ एक तत्व बनाएं और फिर इस तरह एक लिंक बनाएं <a anchor-smooth-scroll="my-div">visit my div</a>:।

— जेसन स्वेट

Answer 2

आप " https://github.com/durated/angular-scroll/ " लिंक कोणीय-स्क्रॉल का भी उपयोग कर सकते हैं । यह एक पेशेवर देखो पाने के लिए कुछ आसान कार्यों को भी आसान स्क्रॉलिंग है।

Comments

क्या यह प्लगिन अन्य तत्वों पर काम करता है इसके अलावा $ दस्तावेज बनाते हैं? मैंने एक स्क्रॉल तक स्क्रॉल करने की कोशिश की, ताकि मैं उसके अंदर एक पंक्ति स्क्रॉल कर सकूं, और यह काम नहीं किया ..

— शौनक

Answer 3

ब्रेट के जवाब ने मेरे लिए बहुत काम किया। मैंने उनके समाधान पर कुछ छोटे बदलाव किए, जैसे कि प्रतिरूपीकरण और परीक्षणशीलता।

यहाँ अभी तक JFFiddle पर एक और काम करने का उदाहरण है है जिसमें परीक्षण के साथ अन्य संस्करण शामिल हैं।

परीक्षण के लिए, मैं कर्म और चमेली का उपयोग कर रहा हूं। हस्ताक्षर को इस प्रकार थोड़ा संशोधित किया गया है:

 anchorSmoothScroll.scrollTo(elementId, speed);

जहां तत्व को स्क्रॉल करने के लिए एक अनिवार्य विशेषता है और गति वैकल्पिक है जहां डिफ़ॉल्ट 20 है (जैसा कि पहले था)।

Answer 4

आप ngSmoothScroll, लिंक का भी उपयोग कर सकते हैं: https://github.com/d-oliveros/ngSmoothScroll ।

बस smoothScrollएक निर्भरता के रूप में मॉड्यूल को शामिल करें और इसे इस तरह उपयोग करें:

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

Answer 5

यहां कोई भी समाधान वास्तव में नहीं है जो ओपी ने मूल रूप से पूछा, $anchorScrollअर्थात् , स्क्रॉलिंग को सुचारू रूप से करें। चिकनी स्क्रॉल निर्देश के बीच अंतर है और $anchroScrollइसका उपयोग / संशोधित करता है$location.hash() , जो कुछ मामलों में वांछनीय हो सकता है।

यहां सरल मॉड्यूल के लिए जिस्ट है जो $ $ एंकरस्रोलिंग स्क्रॉल को चिकनी स्क्रॉलिंग के साथ बदल देता है। इसमें https://github.com/oblador/angular-scroll का उपयोग किया गया है स्क्रॉलिंग के लिए लाइब्रेरी है (यदि आप चाहें तो इसे किसी और चीज़ से बदल दें, यह आसान होना चाहिए)।

https://gist.github.com/mdvorak/fc8b531d3e082f3fdaa9
नोट: यह वास्तव में सुचारू रूप से स्क्रॉल करने के लिए $ लंगर नहीं मिलता है, लेकिन यह स्क्रॉल करने के लिए अपने हैंडलर को बदल देता है।

mdvorakSmoothScrollअपने एप्लिकेशन में मॉड्यूल को संदर्भित करके इसे सक्षम करें ।

Answer 6

एलन, धन्यवाद। अगर किसी को दिलचस्पी है, तो मैंने इसे जॉन पैप्पा के मानकों के आधार पर स्वरूपित किया।

(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);
                }
            }

        }

    };

};

})();

Answer 7

मुझे पता नहीं है कि कैसे चेतन किया जाता है $anchorScroll। यहाँ मैं इसे अपनी परियोजनाओं में कैसे करूँ:

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

और जेएस समारोह:

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