التحكم في مقاس عناصر صفحة HTML وعملية تمرير الصفحة (Scrolling) عبر جافاسكربت

تمثل لغة JavaScript أحد الأعمدة الأساسية في تطوير واجهات المستخدم التفاعلية على صفحات الويب الحديثة، ويُعد التحكم في مقاسات العناصر (dimensions) وكذلك في تمرير الصفحة (scrolling) من أهم المهام التي يتم تنفيذها من خلال هذه اللغة، حيث تتيح للمطورين مرونة كاملة في إدارة سلوك واجهات الاستخدام وتقديم تجربة مستخدم ديناميكية وذكية.

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

أولاً: فهم مقاسات العناصر في HTML عبر JavaScript

عندما نتحدث عن مقاسات العناصر في HTML، فإننا نشير إلى عدة مفاهيم يجب التفريق بينها، وهي:

1. offsetWidth و offsetHeight
   
   تمثل هاتان الخاصيتان العرض والارتفاع الكاملين للعنصر، وتشملان الحدود (borders) والحشو الداخلي (padding)، ولكن لا تشملان الهوامش الخارجية (margins).

2. clientWidth و clientHeight
   
   تشير هذه القيم إلى العرض والارتفاع الداخليين للعنصر دون احتساب الحدود، لكنها تشمل الحشو.

3. scrollWidth و scrollHeight
   
   تعبّر عن الحجم الكامل للمحتوى داخل العنصر، حتى وإن كان هذا المحتوى يمتد خارج الإطار المرئي.

4. getBoundingClientRect()
   
   تُستخدم هذه الدالة للحصول على كائن يحتوي على معلومات دقيقة حول موقع العنصر على الشاشة وأبعاده.

مثال عملي:

javascript
CopyEdit
const element = document.getElementById('box');

console.log('Offset Width:', element.offsetWidth);
console.log('Client Width:', element.clientWidth);
console.log('Scroll Width:', element.scrollWidth);

const rect = element.getBoundingClientRect();
console.log('Top position relative to viewport:', rect.top);

ثانياً: تغيير أبعاد العناصر ديناميكياً

تتيح JavaScript إمكانية تغيير أبعاد العناصر في الوقت الفعلي، مما يدعم بناء واجهات تفاعلية يمكن إعادة تهيئتها تلقائياً بناءً على محتوى أو استجابة المستخدم.

تعديل الأبعاد عبر الأنماط (CSS Style):

javascript
CopyEdit
const div = document.getElementById('resize-me');
div.style.width = '300px';
div.style.height = '150px';

يمكن أيضاً استخدام وحدات نسبية مثل vh, vw, أو % للتحكم في مقاسات العناصر بشكل مرن ومتجاوب.

استخدام CSS Classes للتغيير الجماعي:

javascript
CopyEdit
div.classList.add('expanded');

ثم في CSS:

css
CopyEdit
.expanded {
  width: 100%;
  height: 400px;
}

ثالثاً: التعامل مع التمرير (Scrolling)

تُعد عملية التمرير (Scrolling) جزءاً مهماً في صفحات الويب التي تحتوي على محتوى يتجاوز حجم نافذة العرض. ويمكن التحكم بها عبر عدة آليات من خلال JavaScript.

قراءة موضع التمرير

للصفحة:

javascript
CopyEdit
let scrollTop = window.scrollY || window.pageYOffset;
let scrollLeft = window.scrollX || window.pageXOffset;

لعنصر معين:

javascript
CopyEdit
let container = document.getElementById('scroll-container');
let scrollTop = container.scrollTop;
let scrollLeft = container.scrollLeft;

تغيير موضع التمرير

تمرير الصفحة إلى نقطة معينة:

javascript
CopyEdit
window.scrollTo({
  top: 500,
  left: 0,
  behavior: 'smooth'
});

تمرير عنصر معين إلى نقطة معينة داخله:

javascript
CopyEdit
container.scrollTop = 200;
container.scrollLeft = 100;

رابعاً: تمرير تلقائي إلى عنصر معين

يمكن أن يتم تمرير الصفحة تلقائياً إلى عنصر معين باستخدام دالة scrollIntoView()، والتي تُعتبر من أكثر الطرق فعالية للوصول إلى عنصر محدد.

مثال:

javascript
CopyEdit
document.getElementById('target-element').scrollIntoView({
  behavior: 'smooth',
  block: 'start'
});

أنواع التمرير:

• behavior: 'auto' (الافتراضي)

• behavior: 'smooth' (تمرير سلس)

• block: 'start' | 'center' | 'end' | 'nearest'

خامساً: الكشف عن التمرير والتنفيذ بناء عليه

يمكن استخدام أحداث التمرير (scroll events) للكشف عن سلوك المستخدم وتحديث المحتوى أو الواجهة بناء على ذلك، ولكن يجب مراعاة الأداء وتفادي الاستخدام المفرط لهذا النوع من الأحداث.

مثال:

javascript
CopyEdit
window.addEventListener('scroll', function () {
  let position = window.scrollY;
  if (position > 300) {
    document.body.classList.add('scrolled');
  }
});

سادساً: منع أو تخصيص التمرير

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

منع تمرير الصفحة:

javascript
CopyEdit
document.body.style.overflow = 'hidden';

إعادة التمرير:

javascript
CopyEdit
document.body.style.overflow = 'auto';

منع تمرير عنصر معين:

javascript
CopyEdit
document.getElementById('modal').addEventListener('wheel', function(e) {
  e.preventDefault();
}, { passive: false });

سابعاً: التفاعل مع أبعاد الشاشة

يساعد استخدام window.innerWidth و window.innerHeight على بناء واجهات تتفاعل مع تغير حجم الشاشة.

javascript
CopyEdit
window.addEventListener('resize', () => {
  console.log('Width:', window.innerWidth);
  console.log('Height:', window.innerHeight);
});

ثامناً: جدول يلخص خصائص الأبعاد والتمرير

تاسعاً: استخدام مكتبات خارجية لتعزيز التحكم

يمكن استخدام مكتبات JavaScript مثل GSAP أو Locomotive Scroll أو ScrollMagic لتقديم تأثيرات تمرير متقدمة وديناميكية تتجاوز قدرات التمرير الأصلية.

مثال باستخدام GSAP:

javascript
CopyEdit
gsap.to(window, { duration: 1, scrollTo: 1000 });

عاشراً: حالات استخدام عملية للتحكم في المقاسات والتمرير

1. إظهار نافذة منبثقة في منتصف الشاشة
   
   باستخدام getBoundingClientRect() لتحديد موضع العنصر ثم استخدام scrollIntoView() لضمان ظهوره.

2. إظهار زر “العودة للأعلى” بعد تمرير معين
   
   باستخدام الحدث scroll مع مقارنة قيمة window.scrollY.

3. مزامنة التمرير بين عنصرين
   
   عبر تعيين scrollTop لعنصر بناءً على التغير في scrollTop لعنصر آخر.

أحد عشر: تحسين الأداء عند التعامل مع التمرير

• تجنب تنفيذ عمليات ثقيلة داخل حدث scroll.

• استخدام تقنية throttling أو debouncing لتقليل عدد الاستدعاءات.

• الاستفادة من requestAnimationFrame لتحديث الرسوميات بسلاسة.

javascript
CopyEdit
let ticking = false;

window.addEventListener('scroll', function () {
  if (!ticking) {
    window.requestAnimationFrame(function () {
      // تنفيذ المنطق هنا
      ticking = false;
    });
    ticking = true;
  }
});

اثنا عشر: قياسات دقيقة في بيئات متجاوبة

عند تصميم واجهات تستجيب لحجم الشاشة، من المهم الجمع بين CSS media queries وخصائص JavaScript مثل:

• matchMedia()

• window.innerWidth و window.innerHeight

javascript
CopyEdit
if (window.matchMedia("(max-width: 600px)").matches) {
  console.log("تفعيل إعدادات العرض الصغير");
}

المصادر والمراجع

• MDN Web Docs – JavaScript and DOM APIs:
  
  https://developer.mozilla.org/en-US/docs/Web/API/Element

• CSS-Tricks – All About Scrolling:
  
  https://css-tricks.com/native-smooth-scrolling/

بهذا نكون قد تناولنا مختلف الجوانب التقنية المتعلقة بالتحكم في أبعاد عناصر HTML وآليات تمرير الصفحة باستخدام JavaScript، بدءاً من القراءة الدقيقة للأبعاد، مروراً بتعديلها وتخصيص التمرير، وصولاً إلى تقنيات تحسين الأداء وتقديم تجربة مستخدم أكثر تفاعلية.