شرح - تنزيل مكتبة jquery




كيف أحصل على الإزاحة() أعلى قيمة لعنصر دون استخدام jQuery؟ (4)

أنا أبرمج تطبيقًا من صفحة واحدة باستخدام إطار عمل الزاوي. أنا جديد على ذلك. لقد قرأت هذا الدليل لمساعدتي في فهم الاختلافات الأساسية بين jQuery و Angular وأرغب في اتباع هذا التوجيه قدر الإمكان وعدم استخدام jQuery.

باستثناء أن jQuery يساعد في التغلب على عدم التوافق في المتصفح ويوفر مكتبة مفيدة للوظائف ، مثل القدرة على معرفة الموضع العلوي لعنصر من أعلى النافذة ، كما هو الحال في $('element').offset().top . لا يبدو أن جافاسكريبت قادر على الاقتراب دون إعادة كتابة هذه الوظيفة ، وعندها لن يكون من الأفضل استخدام مكتبة أو مسج مثل المكتبة؟

على وجه التحديد ، ما أحاول القيام به هو إعداد توجيه يحدد عنصرًا ما في مكانه بمجرد أن يتم تمرير الجزء العلوي منه إلى موضع معين في النافذة. إليك ما يبدو عليه:

directives.scrollfix = function () {
    return {
        restrict: 'C',
        link: function (scope, element, $window) {

            var $page = angular.element(window)
            var $el   = element[0]
            var elScrollTopOriginal = $($el).offset().top - 40

            $page.bind('scroll', function () {

                var windowScrollTop = $page[0].pageYOffset
                var elScrollTop     = $($el).offset().top

                if ( windowScrollTop > elScrollTop - 40) {
                    elScrollTopOriginal = elScrollTop - 40
                    element.css('position', 'fixed').css('top', '40px').css('margin-left', '3px');
                }
                else if ( windowScrollTop < elScrollTopOriginal) {
                    element.css('position', 'relative').css('top', '0').css('margin-left', '0');
                }
            })

        }
    }
}

إذا كانت هناك طريقة أفضل بكثير لتحقيق ذلك في Angular لا أزال أتلقىها ، فأنا سأقدر النصيحة.


استخدم getBoundingClientRect إذا كان $el هو كائن DOM الفعلي:

var top = $el.getBoundingClientRect().top;

JSFiddle

سيوضح Fiddle أن هذا سيحصل على نفس القيمة التي سيمنحكها أعلى إزاحة مسج

تحرير : كما هو مذكور في التعليقات ، هذا لا يفسر المحتوى الذي تم تمريره ، أدناه هو الكود الذي يستخدمه jQuery

https://github.com/jquery/jquery/blob/master/src/offset.js (5/13/2015)

offset: function( options ) {
    //...

    var docElem, win, rect, doc,
        elem = this[ 0 ];

    if ( !elem ) {
        return;
    }

    rect = elem.getBoundingClientRect();

    // Make sure element is not hidden (display: none) or disconnected
    if ( rect.width || rect.height || elem.getClientRects().length ) {
        doc = elem.ownerDocument;
        win = getWindow( doc );
        docElem = doc.documentElement;

        return {
            top: rect.top + win.pageYOffset - docElem.clientTop,
            left: rect.left + win.pageXOffset - docElem.clientLeft
        };
    }
}

الحل المقبول من قبل باتريك إيفانز لا يأخذ في الاعتبار التمرير. لقد غيرت قليلا jsfiddle لإظهار هذا:

css: أضف بعض الارتفاع العشوائي للتأكد من أن لدينا بعض المساحة للتمرير

body{height:3000px;} 

شبيبة: تعيين بعض موقف التمرير

jQuery(window).scrollTop(100);

نتيجة لذلك ، تختلف القيمتان المبلغتان الآن: http://jsfiddle.net/sNLMe/66/

تحديث 14 فبراير 2015

يوجد طلب سحب لانتظار jqLite ، بما في ذلك طريقة الإزاحة الخاصة به (مع مراعاة وضع التمرير الحالي). إلقاء نظرة على المصدر في حال كنت ترغب في تنفيذه بنفسك: https://github.com/angular/angular.js/pull/3799/files


للحصول على الزاوي 2+ للحصول على إزاحة العنصر الحالي (this.el.nativeElement يساوي $ (هذا) في مسج):

export class MyComponent implements  OnInit {

constructor(private el: ElementRef) {}

    ngOnInit() {
      //This is the important line you can use in your function in the code
      //-------------------------------------------------------------------------- 
        let offset = this.el.nativeElement.getBoundingClientRect().top;
      //--------------------------------------------------------------------------    

        console.log(offset);
    }

}

يبدو أنه يمكنك فقط استخدام طريقة الدفع على العنصر الزاوي:

var top = $el.prop('offsetTop');

يعمل لدي. لا أحد يعرف أي جانب سلبي لهذا؟





scrolltop