كيفية العمل مع التمرير على صفحات الويب

اكتشف كيفية التفاعل مع التمرير ، والتفاعل مع أحداث التمرير وخنقها

من المحتمل أن يكون التمرير في الصفحة لمشاهدة المحتوى الموجود أسفل الجزء المرئي من الصفحة هو الحدث الأكثر شيوعًا الذي يحدث على الصفحة ، أكثر من النقرات أو أحداث لوحة المفاتيح.

يمكنك الاستماع إلى ملفاتscrollحدث علىwindowكائن للحصول على معلومات في كل مرة يقوم فيها المستخدم بتمرير الصفحة:

window.addEventListener('scroll', event => {
  // scroll event detected
})

داخل معالج الأحداث ، يمكنك التحقق من موضع التمرير العمودي الحالي عن طريق التحقق منwindowمنشأهwindow.scrollY، واستخدام التهديف الأفقيwindow.scrollX.

window.addEventListener('scroll', event => {
  console.log(window.scrollY)
  console.log(window.scrollX)
})

لا تنسىscrollالحدث ليس شيئًا لمرة واحدة.

يتم تشغيله عدة مرات أثناء التمرير ، وليس فقط في نهاية أو بداية التمرير ، لذلك هناك مشكلة إذا كنت بحاجة إلى القيام بأي نوع من العمليات.

يجب ألا تقوم بأي عملية حسابية أو تلاعب في معالج حدث المعالج مباشرة ، ولكن يجب أن نستخدمهاخانقبدلا من.

خانق

الscrollلم يتم تشغيل الحدث مرة واحدة لكل حدث ، ولكنهم يستدعون باستمرار وظيفة معالج الحدث طوال مدة الإجراء.

هذا لأنه يوفر إحداثيات حتى تتمكن من تتبع ما يحدث.

إذا قمت بإجراء عملية معقدة في معالج الحدث ، فسوف تؤثر على الأداء وتسبب تجربة بطيئة لمستخدمي موقعك.

المكتبات التي توفر الاختناق مثللوداشتطبيقه في أكثر من 100 سطر من التعليمات البرمجية للتعامل مع كل حالة استخدام ممكنة. تطبيق بسيط وسهل الفهم هو هذا الذي يستخدمsetTimeoutللتخزين المؤقت لحدث التمرير كل 100 مللي ثانية:

let cached = null
window.addEventListener('scroll', event => {
  if (!cached) {
    setTimeout(() => {
      //you can access the original event at `cached`
      cached = null
    }, 100)
  }
  cached = event
})

الخنق ينطبق أيضا علىmousemoveحدث رأيناه في درس أحداث الماوس. نفس الشيء - يتم إطلاق هذا الحدث عدة مرات أثناء تحريك الماوس.

هذا مثال على Codepen:

انظر القلمأحداث التمريربقلم فلافيو كوبس (تضمين التغريدة) تشغيلكود.

Tech Wiki Online!