خاصية Scroll Behavior
آخر تحديث: 2026-09-13
scroll-behavior خاصية Scroll Behavior
تتحكم خاصية scroll-behavior فيما إذا كانت عملية التمرير تقفز إلى الوجهة فوراً أو تتحرك بسلاسة. مع smooth، عند النقر على رابط رابط (anchor) أو التمرير عبر JavaScript، ينزلق إلى الموضع المستهدف بدلاً من القفز، مما يحسّن تجربة المستخدم بشكل ملحوظ.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
scroll-behavior: auto | smooth;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | smooth | كلمة مفتاحية | سلوك التمرير |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| scroll-behavior | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يؤدي ضبط scroll-behavior: smooth على عنصر html أو حاوية التمرير الجذر إلى تطبيقه عالمياً.
تحذير： يحترم التمرير السلس إعداد الوصول prefers-reduced-motion الخاص بالمستخدم؛ فإذا مكّن المستخدم تقليل الحركة، يتجاهل المتصفح قيمة smooth تلقائياً.
❓ الأسئلة الشائعة
Qهل يؤثر scroll-behavior: smooth على window.scrollTo() في JavaScript؟
Aنعم. طالما أن حاوية التمرير لديها scroll-behavior: smooth، فإن window.scrollTo و scrollBy و scrollIntoView تتمرّر بسلاسة افتراضياً؛ ويمكنك أيضاً تمرير { behavior: 'smooth' } صراحةً في JavaScript لتجاوز ذلك. لاحظ أن قفزات الروابط تحدث على أقرب حاوية تمرير.
Qلماذا لا يعمل التمرير السلس في CSS على صفحة الويب في المتصفح؟
Aصحّح بالترتيب: تحقق من أن الخاصية على العنصر الذي يمرّر فعلياً (التمرير على مستوى الصفحة هو html، والتمرير الداخلي هو عنصر overflow)؛ وتحقق مما إذا كان prefers-reduced-motion: reduce في النظام يلغيها (إعدادات تقليل الحركة تُجبر المتصفح على تجاهل smooth)؛ وتحقق مما إذا كان JavaScript يلغي الافتراضي عبر behavior: 'auto'.
Qهل تؤثر خاصية scroll-behavior: smooth على أداء الصفحة؟
Aيُنفَّذ التمرير السلس أصلاً بواسطة المتصفح، وتعمل عملية التمرير على مؤشر التركيب دون حظر مؤشر الصفحة الرئيسي، لذا فإن تكلفة الأداء ضئيلة. ومع ذلك، إذا حدثت إعادة تخطيط أو رسم ثقيلة أثناء التمرير — صور محمّلة كسولاً أو مستمعو scroll يغيّرون الأنماط — فقد يتلعثم. تجنّب العمل المكلف في أحداث scroll، أو استخدم مستمعين سلبيين (passive) للتحسين.
Qما الفرق بين scroll-behavior والتمرير السلس في JavaScript؟
Aيُحرَّك scroll-behavior: smooth أصلاً بواسطة المتصفح: لا يحتاج JavaScript، وأداؤه جيد، ويحترم تلقائياً prefers-reduced-motion. أما JavaScript (التمرير اليدوي عبر requestAnimationFrame) فيمنح تحكماً أكبر — تنعيم مخصص، والتمرير إلى إزاحات دقيقة — ولكنه يتطلب المزيد من الكود. عندما يكفي CSS، يُفضَّل CSS.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
