scroll-behavior: smooth
فعّل التمرير السلس لروابط الارتساء وعمليات التمرير البرمجية باستخدام scroll-behavior
scroll-behavior: smooth درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
ما هي scroll-behavior؟
تتحكم scroll-behavior فيما إذا كان التمرير الناتج عن التنقل (روابط الارتساء، أو JavaScript scrollTo()) سيُنفَّذ بسلاسة أو بالانتقال الفوري.
scroll-behavior: smooth
يؤدي ضبط scroll-behavior: smooth على عنصر html أو body إلى جعل التنقل عبر روابط الارتساء في الصفحة يتم بحركة سلسة:
<p>Scrolling on this page is smooth thanks to <code>html { scroll-behavior: smooth; }</code>.</p>فوري أم سلس
القيم:
auto(الافتراضية): انتقال فوريsmooth: تمرير متحرك إلى الهدف
التنقل عبر روابط الارتساء
عند تفعيل التمرير السلس، يؤدي النقر على رابط مثل <a href="#contact"> إلى التمرير بسلاسة إلى العنصر ذي id="contact" بدلًا من الانتقال الفوري.
<nav>
<a href="#about">About</a>
<a href="#work">Work</a>
<a href="#contact">Contact</a>
</nav>
<section id="about"><h3>About</h3></section>
<section id="work"><h3>Work</h3></section>
<section id="contact"><h3>Contact</h3></section>JavaScript scrollTo() مع التمرير السلس
مرّر behavior: "smooth" إلى أساليب التمرير في JavaScript لتنفيذ تمرير متحرك:
<pre class="snippet">window.scrollTo({ top: 0, behavior: 'smooth' });
document.querySelector('#section').scrollIntoView({
behavior: 'smooth',
block: 'start'
});</pre>تفاعل prefers-reduced-motion
قد يسبب التمرير السلس دوار الحركة. عطّله دائمًا للمستخدمين الذين يفضلون تقليل الحركة:
<p>Respects <code>prefers-reduced-motion</code>.</p>scroll-behavior على الحاويات
طبّقه على أي حاوية قابلة للتمرير، وليس على الصفحة فقط:
<div class="tabs-panel">
<div class="tab">Tab 1</div><div class="tab">Tab 2</div><div class="tab">Tab 3</div>
</div>القيود
لا تمنح CSS scroll-behavior تحكمًا في مدة التمرير أو دالة التيسير. وللتحكم الدقيق في الحركة، استخدم Web Animations API في JavaScript أو مكتبات مثل GSAP مع إضافات التمرير الخاصة بها.
scroll-padding-top للرؤوس الثابتة
عندما يتداخل رأس ثابت مع أهداف الارتساء، تضيف scroll-padding-top إزاحةً حتى لا يختفي الهدف خلف الرأس:
<p>Anchor targets offset by fixed header height.</p>scroll-margin مقارنةً بـ scroll-padding
تضيف scroll-margin الإزاحة مباشرةً إلى العنصر الهدف، بينما تضيف scroll-padding الإزاحة إلى حاوية التمرير. ويعالج كلاهما مشكلة الرأس الثابت:
<div class="section">Section content</div>ملاحظة حول إمكانية الوصول
يُعد التمرير السلس تحسينًا لتجربة المستخدم. احرص دائمًا على أن يعمل التنقل عبر روابط الارتساء بدونه — فلا تعتمد على سلوك التمرير السلس للوظائف، بل استخدمه للتحسين البصري فقط.
تحقق سريع
كيف تضمن تعطيل حركة التمرير السلس للمستخدمين الذين لديهم حساسية دهليزية تجاه الحركة؟
خلاصة
يؤدي scroll-behavior: smooth على html إلى تفعيل التمرير المتحرك السلس لروابط الارتساء وأساليب التمرير في JavaScript. استخدم scroll-padding-top لإبعاد أهداف التمرير عن المنطقة الواقعة خلف الرؤوس الثابتة. عطّل التمرير السلس دائمًا داخل استعلام الوسائط prefers-reduced-motion: reduce مراعاةً لإمكانية الوصول.
الأسئلة الشائعة
هل درس «scroll-behavior: smooth» مجاني؟
نعم — نص درس «scroll-behavior: smooth» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «scroll-behavior: smooth»؟
فعّل التمرير السلس لروابط الارتساء وعمليات التمرير البرمجية باستخدام scroll-behavior تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «scroll-behavior: smooth»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- overflow: hidden وscroll وauto وclip
- scroll-behavior: smooth
- scroll-snap-type وscroll-snap-align
- تنسيق شريط التمرير باستخدام ::-webkit-scrollbar