هل يوجد حدث يراقب السكرول نحو الاسفل فقط ؟ جافاسكربت

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

لكن ببعض المنطق تستطيع مراقبة متى يحدث التمرير لأسفل أي إتجاه التمرير scrolling كالتالي:

let previousScrollPosition = 0; // تتبع موضع التمرير السابق


window.onscroll = function() {
  const currentScrollPosition = window.scrollY; // الحصول على موضع التمرير الحالي


  if (currentScrollPosition > previousScrollPosition) {
    console.log("تم التمرير لأسفل");
  }


  previousScrollPosition = currentScrollPosition; // تحديث موضع التمرير السابق
};

يمكنك مراقبة سكرول المستخدم في الاتجاه السفلي فقط من خلال الاستماع إلى حدث التمرير scroll ثم التحقق مما إذا كان المستخدم يقوم بالتمرير نحو الأسفل. فيما يلي مثال يوضح كيف يمكنك القيام بذلك:

window.addEventListener('scroll', function() {
  // احصل على موقع التمرير الحالي
  var scrollPosition = window.scrollY || document.documentElement.scrollTop;
   
  // احصل على ارتفاع الصفحة الكلي
  var documentHeight = document.documentElement.scrollHeight;
   
  // احصل على ارتفاع نافذة العرض
  var viewportHeight = window.innerHeight;
   
  // احسب المدى الأعلى المسموح به للتمرير
  var maxScrollPosition = documentHeight - viewportHeight;

  // تحقق مما إذا كان المستخدم يقوم بالتمرير نحو الأسفل
  if (scrollPosition > 0) {
    console.log('التمرير نحو الأسفل');
  }
});

يتم الاستماع إلى حدث التمرير scroll على مستوى النافذة، ثم يتم الحصول على موقع التمرير الحالي scrollPosition وارتفاع الصفحة الكلي documentHeight وارتفاع نافذة العرض viewportHeight، يتم بعد ذلك التحقق مما إذا كان المستخدم يقوم بالتمرير نحو الأسفل عن طريق التحقق مما إذا كان موقع التمرير الحالي أكبر من الصفر، إذا كان كذلك، فسيتم تسجيل رسالة "التمرير نحو الأسفل" .

يمكنك مراقبة حدث ال scroll نحو الأسفل عن طريق حفظ آخر قيمة لل window.scrollY ومقارنتها كما يلي

window.addEventListener('scroll', function(e) {
 // Check if user scrolled down
 if(window.scrollY > lastScrollTop){ 
  // Your code here
 }
 // Update scroll position
 lastScrollTop = window.scrollY;
});

في هذا المثال:

• نقارن الموضع الحالي window.scrollY مع القيمة السابقة lastScrollTop 
• إذا كان window.scrollY أكبر فهذا يعني أن المستخدم قام بالسكرول نحو الأسفل
• نقوم بتحديث lastScrollTop للاحتفاظ بآخر قيمة للمقارنة في المرات القادمة