المتصفح - كيف يمكنني الحصول على موضع شريط التمرير باستخدام جافاسكريبت؟

أنا أحاول اكتشاف موقع شريط تمرير المتصفح باستخدام جافا سكريبت لتحديد مكان العرض الحالي في الصفحة.

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

الإجابة رقم 1

يمكنك استخدام element.scrollTop و element.scrollLeft للحصول على الإزاحة العمودية والأفقية، على التوالي، التي تم تمريرها. يمكن أن يكون element هو document.body إذا كنت تهتم بالصفحة بأكملها. يمكنك مقارنتها بـ element.offsetHeight و element.offsetWidth (مرة أخرى، قد يكون element هو الجسم) إذا كنت بحاجة إلى النسب المئوية.

الإجابة رقم 2

لقد فعلت هذا من أجل <div> على كروم.

element.scrollTop - هو عدد البكسلات المخفية في الأعلى بسبب التمرير. بدون تمرير تكون قيمته 0.

العنصر.scrollHeight - هو عدد وحدات البكسل لقسم div بأكمله.

element.clientHeight - هو عدد البيكسلز التي تراها في متصفحك.

var a = element.scrollTop;

سيكون هو الموقف.

var b = element.scrollHeight - element.clientHeight;

سيكون القيمة القصوى لـ scrollTop.

var c = a / b;

سيكون نسبة التمرير [من 0 إلى 1].

الإجابة رقم 3

إنه مثل هذا :)

window.addEventListener("scroll", (event) => {
    let scroll = this.scrollY;
    console.log(scroll)
});

الإجابة رقم 4

document.getScroll = function() {
    if (window.pageYOffset != undefined) {
        return [pageXOffset, pageYOffset];
    } else {
        var sx, sy, d = document,
            r = d.documentElement,
            b = d.body;
        sx = r.scrollLeft || b.scrollLeft || 0;
        sy = r.scrollTop || b.scrollTop || 0;
        return [sx, sy];
    }
}

يعيد مصفوفة تحتوي على عددين صحيحين - [scrollLeft, scrollTop]

الإجابة رقم 5

الإجابة لعام 2018:

أفضل طريقة للقيام بأشياء مثل هذه هي استخدام واجهة برمجة التطبيقات لمراقب التقاطع.

يوفر واجهة برمجة تطبيقات مراقب التقاطع طريقة لمراقبة التغيرات بشكل غير متزامن في تقاطع عنصر الهدف مع عنصر أصل أو مع نافذة العرض الخاصة بالمستند على مستوى الأعلى.

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

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

تنفيذ اكتشاف التقاطع في الماضي كان يشمل معالجات الأحداث والحلقات التي تستدعي طرقًا مثل Element.getBoundingClientRect() لبناء المعلومات المطلوبة لكل عنصر متأثر. ونظرًا لأن كل هذا الكود يعمل على الخيط الرئيسي، فإن حتى واحدًا منه يمكن أن يسبب مشاكل في الأداء. عندما يتم تحميل موقع يحتوي على هذه الاختبارات، يمكن أن تصبح الأمور سيئة جدًا.

انظر المثال البرمجي التالي:

var options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

var target = document.querySelector('#listItem');
observer.observe(target);

تدعم معظم المتصفحات الحديثة الـ IntersectionObserver، لكن يجب عليك استخدام الـ polyfill لضمان التوافق مع الإصدارات الأقدم.

الإجابة رقم 6

إذا كنت تهتم بالصفحة بأكملها، يمكنك استخدام هذا:

document.body.getBoundingClientRect().top

الإجابة رقم 7

مقتطفات

خاصية scrollY للقراءة فقط في واجهة Window تعيد عدد البكسلات التي تم تمرير المستند بها عمودياً حالياً.

window.addEventListener('scroll', function(){console.log(this.scrollY)})

html{height:5000px}

نسخة أقصر باستخدام دالة سهمية مجهولة (ES6) وتجنب استخدام this

window.addEventListener('scroll', () => console.log(scrollY))

html{height:5000px}