الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

في view.js؟

احصل على إشعار عندما يدخل عنصر DOM إلى إطار العرض أو يخرج منه. أداة جافا سكريبت صغيرة (~1.9 كيلو بايت مضغوطة)، خالية من التبعية، لـ IE9+.

camwiegert.github.io/in-view

تثبيت

إما أن تقوم بتنزيل الإصدار الأخير وإدراجه في الترميز الخاص بك أو تثبيته باستخدام npm: 

npm install --save in-view

الاستخدام الأساسي

باستخدام طريقة العرض، يمكنك تسجيل المعالجات التي يتم استدعاؤها عندما يدخل عنصر ما إلى إطار العرض أو يخرج منه . يتلقى كل معالج عنصرًا واحدًا، وهو العنصر الذي يدخل إلى إطار العرض أو يخرج منه، باعتباره الوسيط الوحيد له. 

 inView ( '.someSelector' )
    . on ( 'enter' , doSomething )
    . on ( 'exit' , el => {
        el . style . opacity = 0.5 ;
    } ) ;

واجهة برمجة التطبيقات

يحتفظ in-view بسجل معالج منفصل لكل مجموعة من العناصر التي تم التقاطها باستخدام inView(<selector>) . يعرض كل تسجيل نفس الطرق الأربع. يعرض العرض أيضًا أربع طرق عالية المستوى. ( is offset ، threshold ، test ).

inView(<selector>).on(<event>, <handler>)

قم بتسجيل معالج للعناصر المحددة بواسطة selector event . الأحداث الوحيدة التي يتم عرضها هي 'enter' و 'exit' . 

 inView ( '.someSelector' ) . on ( 'enter' , doSomething ) ;

inView(<selector>).once(<event>, <handler>)

قم بتسجيل معالج للعناصر المحددة بواسطة selector event . المعالجات المسجلة once سيتم استدعاؤها مرة واحدة فقط. 

 inView ( '.someSelector' ) . once ( 'enter' , doSomething ) ;

inView.is(<element>)

تحقق مما إذا كان element موجودًا في إطار العرض. 

 inView . is ( document . querySelector ( '.someSelector' ) ) ;
// => true

inView.offset(<إزاحة>)

افتراضيًا، يأخذ وضع العرض في الاعتبار شيئًا ما في إطار العرض إذا كسر أي حافة من إطار العرض. يمكن استخدام هذا لتعيين إزاحة من تلك الحافة. على سبيل المثال، ستأخذ الإزاحة البالغة 100 في الاعتبار العناصر الموجودة في إطار العرض إذا كانت تكسر أي حافة من إطار العرض بما لا يقل عن 100 بكسل. يمكن أن يكون offset عددًا صحيحًا موجبًا أو سالبًا. 

 inView . offset ( 100 ) ;
inView . offset ( - 50 ) ;

يمكن أيضًا تعيين الإزاحة لكل اتجاه عن طريق تمرير كائن. 

 inView . offset ( {
    top : 100 ,
    right : 75 ,
    bottom : 50 ,
    left : 25
} ) ;

inView.threshold(<threshold>)

قم بتعيين نسبة ارتفاع العنصر وعرضه الذي يجب أن يكون مرئيًا حتى يتم أخذه في الاعتبار في إطار العرض. هذا الإعداد الافتراضي هو 0 ، مما يعني أي مبلغ. ستتطلب عتبة 0.5 أو 1 أن يكون نصف أو كل ارتفاع العنصر وعرضه، على التوالي، مرئيًا. يجب أن يكون threshold رقمًا بين 0 و 1 . 

 inView . threshold ( 0 ) ;
inView . threshold ( 0.5 ) ;
inView . threshold ( 1 ) ;

inView.test(<اختبار>)

تجاوز معايير الرؤية الافتراضية للعرض باستخدام وظيفة مخصصة. ستتلقى هذه الوظيفة العنصر وكائن الخيارات باعتبارهما الوسيطتين الوحيدتين لها. يُرجع true عندما يجب اعتبار العنصر مرئيًا false بخلاف ذلك. 

 inView . test ( ( el , options ) => {
    // ...
} ) ;

inView(<selector>).check()

التحقق يدويًا من حالة العناصر المحددة بواسطة selector . افتراضيًا، يتم فحص كافة السجلات في أحداث scroll resize load الخاصة window . 

 inView ( '.someSelector' ) . check ( ) ;

inView(<selector>).emit(<event>, <element>)

قم بإصدار event يدويًا لأي عنصر منفرد. 

 inView ( '.someSelector' ) . emit ( 'exit' , document . querySelectorAll ( '.someSelector' ) [ 0 ] ) ;

دعم المتصفح

يدعم العرض جميع المتصفحات الحديثة وIE9+.

كتحذير صغير، يستخدم in-view MutationObserver للتحقق من رؤية العناصر المسجلة بعد طفرة DOM. إذا كانت هذه هي الوظيفة التي تحتاجها في IE9-10، ففكر في استخدام polyfill.

أداء

أي مكتبة تراقب أحداث التمرير تتعرض لخطر انخفاض أداء الصفحة. للتخفيف من هذا الأمر، يقوم العرض حاليًا بتسجيل مستمع حدث واحد فقط (بحد أقصى مرة كل 100 مللي ثانية) في كل حدث من أحداث load resize scroll window ويستخدم تلك الأحداث لإجراء فحص على كل سجل.

استخدام مراقب التقاطع

هناك واجهة برمجة تطبيقات ناشئة للمتصفح، IntersectionObserver ، تهدف إلى تزويد المطورين بطريقة فعالة للتحقق من رؤية عناصر DOM. من الآن فصاعدًا، سيهدف in-view إلى التفويض إلى IntersectionObserver عندما يكون مدعومًا، والعودة إلى الاقتراع فقط عند الضرورة.

ترخيص معهد ماساتشوستس للتكنولوجيا

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل