AngularJS - ch অ্যাঙ্করস্ক্রোল মসৃণ / সময়কাল

Question

অ্যাংুলারজেএস ডক্স পড়ার ফলে আমি বুঝতে পারি না যে $anchorScrollউপাদানগুলিতে স্ক্রোলটি মসৃণ করার জন্য কোনও সময়কাল / নমনীয় বিকল্প থাকতে পারে কিনা ।

এটি কেবল বলে:

$location.hash('bottom');

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

আমি jquery ব্যবহার করি না এবং চাই না; $anchorScrollস্ক্রোলিং আরও মসৃণ করার জন্য এখনও কোনও চৌকস এখনও সহজ উপায় বা প্রসারিত করার উপায় আছে ?

Answer 1

দুর্ভাগ্যক্রমে এটি ব্যবহার করা সম্ভব নয় $anchorScroll। যেমন আপনি আবিষ্কার করেছেন $anchorScrollযে কোনও বিকল্প নেই এবং এর সাথে কাজ করে না $ngAnimate। স্ক্রোলটি অ্যানিমেট করার জন্য আপনাকে নিজের পরিষেবা / কারখানা বা সরাসরি সরাসরি জাভাস্ক্রিপ্ট ব্যবহার করতে হবে।

স্ব-শিক্ষার স্বার্থে আমি একটি মসৃণ স্ক্রোলিং পরিষেবাদির সাথে একটি উদাহরণ রেখেছি। এটি করার আরও ভাল উপায় আছে যাতে কোনও প্রতিক্রিয়া উত্সাহিত হয়।

কোনও উপাদানটিতে স্ক্রোল করতে ng-click="gotoElement(ID)"আপনি কোনও উপাদানকে একটি সংযুক্ত করেন । আমি মনে করি এটি আরও ভালতর রুট হ'ল এটিকে নির্দেশনা তৈরি করা।

এখানে jsFiddle কাজ উদাহরণস্বরূপ ।

হালনাগাদ

এটি সম্পাদন করার জন্য এখন বেশ কয়েকটি তৃতীয় পক্ষের নির্দেশিকা রয়েছে।

• https://github.com/oblador/angular- স্ক্রোল ।
• 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>

— ড্যান

@ ডান ঠিক করুন<a anchor-smooth-scroll>About 1</a> <a anchor-smooth-scroll>About 2</a>

— জাস্টিন ম্যাকক্যান্ডলেস

ভাল লাগল, আমি এই উত্তরটি পছন্দ করি। তবে এটি এখনও অ্যাঙ্গুলারজেএসকে ঘৃণা করার আরও একটি কারণ যুক্ত করেছে, যার অর্থ, জিকুয়েরি স্ক্রোলটো এর সাথে তুলনা করে এর আকারটি দেখুন

— ফেলিপ

নির্দেশ ব্যবহার করতে, একটি আইডি দিয়ে একটি উপাদান তৈরি (যেমন <div id="my-div">my div</div>) এবং তারপর এই মত একটি লিঙ্ক তৈরি: <a anchor-smooth-scroll="my-div">visit my div</a>।

— জেসন সোয়েট

Answer 2

আপনি কৌনিক-স্ক্রোলও ব্যবহার করতে পারেন, " https://github.com/durated/angular-scrol/ " লিঙ্ক করুন । পেশাদার চেহারা পেতে এটি বেশ কয়েকটি স্বাচ্ছন্দ্যজনক স্ক্রোলিং।

Comments

এই প্লাগইনটি ফর্ম-ডকুমেন্টগুলি বাদ দিয়ে অন্য উপাদানগুলিতে কাজ করে? আমি স্ক্রোলটোলিমেটমেন্টটি একটি ডিভিতে প্রয়োগ করার চেষ্টা করেছি যাতে আমি এর ভিতরে একটি সারি ভিউতে স্ক্রোল করতে পারি, এবং এটি কার্যকর হয়নি ..

— শৈনাক

Answer 3

ব্রেটের উত্তর আমার পক্ষে দুর্দান্ত কাজ করেছে। মডুলারাইজেশন এবং টেস্টিবিলিটির ক্ষেত্রে আমি তার সমাধানে কিছু ছোট পরিবর্তন করেছি।

এখানে জেএসফিডেলের আরও কার্যকর উদাহরণ যা পরীক্ষার সাথে অন্য সংস্করণ অন্তর্ভুক্ত করে।

পরীক্ষার জন্য, আমি করমা এবং জুঁই ব্যবহার করছি। স্বাক্ষরটি নীচে কিছুটা পরিবর্তন করা হয়েছে:

 anchorSmoothScroll.scrollTo(elementId, speed);

যেখানে এলিমেন্টটি স্ক্রোল করার জন্য একটি বাধ্যতামূলক বৈশিষ্ট্য এবং গতি optionচ্ছিক যেখানে ডিফল্ট 20 (আগে যেমন ছিল)।

Answer 4

আপনি ngSmoothScrol, লিংকও ব্যবহার করতে পারেন: https://github.com/d-oliveros/ngSmoothScrol ।

smoothScrollমডিউলটিকে কেবল নির্ভরতা হিসাবে অন্তর্ভুক্ত করুন এবং এটি এর মতো ব্যবহার করুন:

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

Answer 5

এখানকার কোনও সমাধানই আসলে ওপি মূলত যা বলেছিল তা করে না, এটি $anchorScrollসহজে স্ক্রোলিং করা। মসৃণ স্ক্রোলিং নির্দেশাবলীর মধ্যে পার্থক্য এবং $anchroScrollএটি হ'ল এটি ব্যবহার করে / সংশোধন করে $location.hash()যা কিছু ক্ষেত্রে কাম্য হতে পারে।

এখানে সরল মডিউলটির সংক্ষিপ্তসার যা smooth অ্যাঙ্করস্ক্রোলটি মসৃণ স্ক্রোলিংয়ের সাথে প্রতিস্থাপন করে। এটি নিজেই স্ক্রোলিংয়ের জন্য https://github.com/oblador/angular-scrol লাইব্রেরি ব্যবহার করে (যদি আপনি চান তবে অন্য কিছু দিয়ে এটি প্রতিস্থাপন করুন, এটি সহজ হওয়া উচিত)।

https://gist.github.com/mdvorak/fc8b531d3e082f3fdaa9
দ্রষ্টব্য: এটি আসলে smooth অ্যাঙ্করস্ক্রোলটি সহজেই স্ক্রোল করতে পায় না, তবে এটি স্ক্রোলিংয়ের জন্য এটির হ্যান্ডলারটি প্রতিস্থাপন করে।

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