سلوك التمرير في CSS: دليل شامل للتمرير السلس

في مشهد تطوير الويب اليوم، تحتل تجربة المستخدم (UX) الصدارة. إحدى التفاصيل التي تبدو صغيرة ولكنها يمكن أن تؤثر بشكل كبير على تجربة المستخدم هي سلاسة التمرير. لا مزيد من القفزات المزعجة بين الأقسام! توفر خاصية scroll-behavior في CSS طريقة بسيطة لكنها قوية لتنفيذ التمرير السلس، مما يعزز إمكانية الوصول إلى الموقع ورضا المستخدم بشكل عام. يقدم هذا الدليل استكشافًا شاملًا لخاصية scroll-behavior، ويغطي كل شيء بدءًا من التنفيذ الأساسي إلى التخصيص المتقدم واعتبارات توافق المتصفحات لجمهور عالمي حقيقي.

ما هو سلوك التمرير في CSS؟

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

التنفيذ الأساسي لـ scroll-behavior: smooth;

أبسط طريقة لتمكين التمرير السلس هي تطبيق خاصية scroll-behavior: smooth; على عنصر html أو body. هذا يجعل كل عمليات التمرير داخل منفذ العرض سلسة.

التطبيق على عنصر html:

هذه هي الطريقة المفضلة بشكل عام لأنها تؤثر على سلوك التمرير للصفحة بأكملها.

html {
  scroll-behavior: smooth;
}

التطبيق على عنصر body:

تعمل هذه الطريقة أيضًا ولكنها أقل شيوعًا لأنها تؤثر فقط على المحتوى داخل body.

body {
  scroll-behavior: smooth;
}

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

التمرير السلس باستخدام الروابط المرجعية (Anchor Links)

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

هيكل HTML للروابط المرجعية:

<nav>
  <ul>
    <li><a href="#section1">القسم 1</a></li>
    <li><a href="#section2">القسم 2</a></li>
    <li><a href="#section3">القسم 3</a></li>
  </ul>
</nav>

<section id="section1">
  <h2>القسم 1</h2>
  <p>محتوى القسم 1...</p>
</section>

<section id="section2">
  <h2>القسم 2</h2>
  <p>محتوى القسم 2...</p>
</section>

<section id="section3">
  <h2>القسم 3</h2>
  <p>محتوى القسم 3...</p>
</section>

مع وجود قاعدة CSS html { scroll-behavior: smooth; }، سيؤدي النقر على أي من الروابط في قائمة التنقل إلى حركة تمرير سلسة إلى القسم المقابل.

استهداف عناصر محددة قابلة للتمرير

يمكنك أيضًا تطبيق scroll-behavior: smooth; على عناصر محددة قابلة للتمرير، مثل عناصر divs التي تحتوي على overflow: auto; أو overflow: scroll;. يتيح لك هذا تمكين التمرير السلس داخل حاوية معينة دون التأثير على بقية الصفحة.

مثال: التمرير السلس في عنصر Div:

<div class="scrollable-container">
  <p>الكثير من المحتوى هنا...</p>
  <p>محتوى إضافي...</p>
  <p>المزيد من المحتوى...</p>
</div>

.scrollable-container {
  width: 300px;
  height: 200px;
  overflow: scroll;
  scroll-behavior: smooth;
}

في هذا المثال، سيتم تمرير المحتوى الموجود داخل .scrollable-container فقط بسلاسة.

التمرير السلس البرمجي باستخدام JavaScript

بينما تتعامل خاصية scroll-behavior: smooth; مع التمرير الذي يتم تشغيله بواسطة تفاعل المستخدم (مثل النقر على الروابط المرجعية)، قد تحتاج إلى بدء التمرير برمجيًا باستخدام JavaScript. توفر دالتا scrollTo() و scrollBy()، عند دمجهما مع خيار behavior: 'smooth'، طريقة لتحقيق ذلك.

استخدام scrollTo():

تقوم دالة scrollTo() بتمرير النافذة إلى إحداثيات محددة.

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

سيقوم هذا الكود بتمرير النافذة بسلاسة إلى إزاحة عمودية تبلغ 500 بكسل من الأعلى.

استخدام scrollBy():

تقوم دالة scrollBy() بتمرير النافذة بمقدار محدد.

window.scrollBy({
  top: 100,
  left: 0,
  behavior: 'smooth'
});

سيقوم هذا الكود بتمرير النافذة بسلاسة إلى الأسفل بمقدار 100 بكسل.

مثال: التمرير السلس إلى عنصر عند النقر على زر:

<button id="scrollButton">التمرير إلى القسم 3</button>

<section id="section3">
  <h2>القسم 3</h2>
  <p>محتوى القسم 3...</p>
</section>

const scrollButton = document.getElementById('scrollButton');
const section3 = document.getElementById('section3');

scrollButton.addEventListener('click', () => {
  section3.scrollIntoView({
    behavior: 'smooth'
  });
});

عند النقر على الزر، ستمرر الصفحة بسلاسة إلى عنصر "القسم 3" باستخدام scrollIntoView(). غالبًا ما تُفضل هذه الطريقة لأنها تحسب الموضع الدقيق للعنصر الهدف، بغض النظر عن تغييرات المحتوى الديناميكي.

تخصيص سرعة التمرير والتخفيف (Easing)

بينما توفر scroll-behavior: smooth; حركة تمرير سلسة افتراضية، لا يمكنك التحكم مباشرة في السرعة أو التخفيف (معدل تغير الحركة بمرور الوقت) باستخدام CSS وحدها. يتطلب التخصيص استخدام JavaScript.

ملاحظة هامة: يمكن أن تكون الحركات الطويلة جدًا أو المعقدة ضارة بتجربة المستخدم، وقد تسبب دوار الحركة أو تعيق تفاعل المستخدم. اسعَ إلى حركات دقيقة وفعالة.

التخصيص المعتمد على JavaScript:

لتخصيص سرعة التمرير والتخفيف، تحتاج إلى استخدام JavaScript لإنشاء حركة مخصصة. يتضمن هذا عادةً استخدام مكتبات مثل GSAP (GreenSock Animation Platform) أو تنفيذ منطق الحركة الخاص بك باستخدام requestAnimationFrame.

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

function smoothScroll(target, duration) {
  const start = window.pageYOffset;
  const targetPosition = target.getBoundingClientRect().top;
  const startTime = performance.now();

  function animation(currentTime) {
    const timeElapsed = currentTime - startTime;
    const run = ease(timeElapsed, start, targetPosition, duration);
    window.scrollTo(0, run);
    if (timeElapsed < duration) {
      requestAnimationFrame(animation);
    }
  }

  // دالة التخفيف (مثال: easeInOutQuad)
  function ease(t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
  }

  requestAnimationFrame(animation);
}

// مثال على الاستخدام:
const targetElement = document.getElementById('section3');
const scrollDuration = 1000; // ميللي ثانية
smoothScroll(targetElement, scrollDuration);

يعرف هذا الكود دالة smoothScroll تأخذ عنصرًا هدفًا ومدة كمدخلات. تستخدم requestAnimationFrame لإنشاء حركة سلسة وتتضمن دالة تخفيف (easeInOutQuad في هذا المثال) للتحكم في وتيرة الحركة. يمكنك العثور على العديد من دوال التخفيف المختلفة عبر الإنترنت لتحقيق تأثيرات حركية متنوعة.

اعتبارات إمكانية الوصول

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

تنفيذ تفضيل المستخدم:

أفضل نهج هو احترام تفضيلات نظام التشغيل للمستخدم لتقليل الحركة. تسمح لك استعلامات الوسائط مثل prefers-reduced-motion باكتشاف ما إذا كان المستخدم قد طلب تقليل الحركة في إعدادات نظامه.

استخدام prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important; /* تجاوز التمرير السلس */
  }
}

يعطل هذا الكود التمرير السلس إذا قام المستخدم بتمكين إعداد "تقليل الحركة" في نظام التشغيل الخاص به. يُستخدم العلم !important لضمان أن هذه القاعدة تتجاوز أي تعريفات أخرى لخاصية scroll-behavior.

توفير مفتاح تبديل يدوي:

يمكنك أيضًا توفير مفتاح تبديل يدوي (مثل مربع اختيار) يتيح للمستخدمين تمكين أو تعطيل التمرير السلس. هذا يمنح المستخدمين تحكمًا مباشرًا أكبر في تجربتهم.

<label>
  <input type="checkbox" id="smoothScrollToggle">
  تمكين التمرير السلس
</label>

const smoothScrollToggle = document.getElementById('smoothScrollToggle');

smoothScrollToggle.addEventListener('change', () => {
  if (smoothScrollToggle.checked) {
    document.documentElement.style.scrollBehavior = 'smooth';
  } else {
    document.documentElement.style.scrollBehavior = 'auto';
  }
});

يضيف هذا الكود مربع اختيار يسمح للمستخدمين بتبديل التمرير السلس بين التشغيل والإيقاف. تذكر أن تحتفظ بتفضيل المستخدم هذا (على سبيل المثال، باستخدام التخزين المحلي) حتى يتم تذكره عبر الجلسات.

توافق المتصفحات

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

• Chrome: مدعوم منذ الإصدار 61
• Firefox: مدعوم منذ الإصدار 36
• Safari: مدعوم منذ الإصدار 14.1 (دعم جزئي في الإصدارات السابقة)
• Edge: مدعوم منذ الإصدار 79
• Opera: مدعوم منذ الإصدار 48
• Internet Explorer: غير مدعوم

توفير بديل للمتصفحات القديمة:

بالنسبة للمتصفحات التي لا تدعم scroll-behavior، يمكنك استخدام polyfill بلغة JavaScript. الـ polyfill هو جزء من الكود يوفر وظائف ميزة أحدث في المتصفحات القديمة.

مثال: استخدام Polyfill:

هناك العديد من مكتبات JavaScript المتاحة التي توفر polyfills للتمرير السلس. أحد الخيارات هو استخدام مكتبة مثل "smoothscroll-polyfill".

<script src="https://cdn.jsdelivr.net/npm/smoothscroll-polyfill@1.4.4/dist/smoothscroll.min.js"></script>
<script>
  smoothscroll.polyfill();
</script>

يتضمن هذا الكود مكتبة "smoothscroll-polyfill" ويقوم بتهيئتها. سيوفر هذا وظيفة التمرير السلس في المتصفحات القديمة التي لا تدعم scroll-behavior بشكل أصلي.

التحميل الشرطي: فكر في تحميل الـ polyfill بشكل شرطي باستخدام أداة تحميل النصوص البرمجية أو اكتشاف الميزات لتجنب الحمل الزائد غير الضروري في المتصفحات الحديثة.

أفضل الممارسات للتمرير السلس

إليك بعض أفضل الممارسات التي يجب أخذها في الاعتبار عند تنفيذ التمرير السلس:

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

المشكلات الشائعة والحلول

إليك بعض المشكلات الشائعة التي قد تواجهها عند تنفيذ التمرير السلس وحلولها:

• المشكلة: التمرير السلس لا يعمل.
  • الحل: تحقق مرة أخرى من تطبيق scroll-behavior: smooth; على عنصر html أو body. تأكد من أن الروابط المرجعية تشير بشكل صحيح إلى الأقسام المقابلة. تحقق من عدم وجود قواعد CSS متعارضة تتجاوز خاصية scroll-behavior.
• المشكلة: التمرير السلس بطيء جدًا أو سريع جدًا.
  • الحل: قم بتخصيص سرعة التمرير باستخدام JavaScript، كما هو موضح في قسم "تخصيص سرعة التمرير والتخفيف". جرب دوال تخفيف مختلفة لإيجاد التوازن الصحيح بين السلاسة والاستجابة.
• المشكلة: الترويسة الثابتة تتداخل مع هدف التمرير.
  • الحل: استخدم خاصية scroll-padding-top في CSS لإضافة حشوة إلى أعلى حاوية التمرير. بدلاً من ذلك، استخدم JavaScript لحساب ارتفاع الترويسة الثابتة وضبط موضع التمرير وفقًا لذلك.
• المشكلة: التمرير السلس يتعارض مع وظائف JavaScript الأخرى.
  • الحل: تأكد من أن كود JavaScript الخاص بك لا يتعارض مع حركة التمرير السلس. استخدم مستمعي الأحداث والـ callbacks لتنسيق تنفيذ وظائف JavaScript المختلفة.

تقنيات واعتبارات متقدمة

إلى جانب الأساسيات، هناك العديد من التقنيات والاعتبارات المتقدمة لتعزيز تنفيذ التمرير السلس لديك.

استخدام scroll-margin و scroll-padding:

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

• scroll-margin: تحدد الهامش حول منطقة التقاط التمرير.
• scroll-padding: تحدد الحشوة حول منطقة التقاط التمرير.

مثال:

section {
  scroll-margin-top: 20px; /* يضيف هامشًا قدره 20 بكسل فوق كل قسم عند التمرير */
}

html {
  scroll-padding-top: 60px; /* يضيف حشوة قدرها 60 بكسل في الجزء العلوي من منفذ العرض عند التمرير */
}

الدمج مع Intersection Observer API:

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

مثال:

const sections = document.querySelectorAll('section');

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // افعل شيئًا ما عندما يكون القسم مرئيًا
      console.log('القسم ' + entry.target.id + ' مرئي');
    } else {
      // افعل شيئًا ما عندما يكون القسم خارج العرض
      console.log('القسم ' + entry.target.id + ' خارج العرض');
    }
  });
}, {
  threshold: 0.5 // يتم التشغيل عندما يكون 50٪ من العنصر مرئيًا
});

sections.forEach(section => {
  observer.observe(section);
});

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

منظورات عالمية حول سلوك التمرير

بينما يظل التنفيذ الفني للتمرير السلس ثابتًا على مستوى العالم، يمكن للاعتبارات الثقافية والسياقية أن تؤثر على قابليته للاستخدام المتصورة.

• سرعة الإنترنت: في المناطق ذات الاتصالات البطيئة بالإنترنت، يمكن أن تؤثر مكتبات JavaScript الكبيرة للحركات المخصصة سلبًا على أوقات التحميل وتجربة المستخدم. أعطِ الأولوية للحلول خفيفة الوزن والتحميل الشرطي.
• إمكانيات الأجهزة: قم بالتحسين لمجموعة واسعة من الأجهزة، من أجهزة الكمبيوتر المكتبية المتطورة إلى الهواتف المحمولة منخفضة الطاقة. اختبر بشكل شامل على أجهزة وأحجام شاشات مختلفة.
• معايير إمكانية الوصول: التزم بمعايير إمكانية الوصول الدولية مثل WCAG (إرشادات الوصول إلى محتوى الويب) لضمان الشمولية للمستخدمين ذوي الإعاقة.
• توقعات المستخدم: بينما يتم استقبال التمرير السلس بشكل جيد بشكل عام، كن على دراية بالاختلافات الثقافية المحتملة في توقعات المستخدم فيما يتعلق بالحركة. اختبر مع مجموعات مستخدمين متنوعة لجمع الملاحظات.

الخاتمة

تعتبر scroll-behavior: smooth; خاصية CSS قيمة يمكنها تحسين تجربة المستخدم لموقعك بشكل كبير. من خلال فهم تنفيذها الأساسي، وخيارات التخصيص، واعتبارات إمكانية الوصول، وتوافق المتصفحات، يمكنك إنشاء تجربة تصفح سلسة وممتعة للمستخدمين في جميع أنحاء العالم. تذكر إعطاء الأولوية لإمكانية الوصول، وتحسين الأداء، والاختبار الشامل لضمان أن تنفيذ التمرير السلس يلبي احتياجات جميع المستخدمين. باتباع الإرشادات وأفضل الممارسات الموضحة في هذا الدليل، يمكنك إتقان التمرير السلس وإنشاء موقع ويب جذاب بصريًا وسهل الاستخدام لجمهور عالمي.