دليل تنسيق شريط التمرير في CSS: كيفية إنشاء شريط تمرير مخصص باحترافية

Updated يونيو 9, 2026 7 min read

Aldawsari

دقائق القراءة: 7

صورة توضيحية لشرح تنسيق شريط التمرير المخصص باستخدام CSS

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

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

ماذا ستتعلم من هذا الدليل؟

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

مثال إبداعي على تصميم شريط تمرير مخصص وغير تقليدي باستخدام CSS

لماذا قد تحتاج إلى شريط تمرير مخصص؟

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

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

مزايا شريط التمرير المخصص

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

العيوب المحتملة

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

البدء: إنشاء صفحة تحتوي على محتوى كافٍ للتمرير

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <h1>CSS Scrollbar Customization</h1>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</body>
</html>

في هذا المثال لدينا حاوية باسم container، وعنوان رئيسي، ومجموعة فقرات تحمل الصنف para لملء الصفحة بالمحتوى.

أما تنسيق CSS الأساسي فيمكن أن يكون بالشكل التالي:

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

.para {
  font-size: 16px;
  padding: 20px;
  width: 70%;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

معاينة أولية لتخطيط الصفحة قبل تخصيص شريط التمرير في CSS

كيفية إنشاء شريط تمرير مخصص باستخدام CSS

بعد تجهيز الصفحة، يمكن الانتقال إلى الجزء الأهم: تخصيص شريط التمرير نفسه. وهنا يجب الانتباه إلى أن دعم المتصفحات ليس موحداً تماماً، فمتصفحات Chrome وEdge وSafari تعتمد خصائص WebKit، بينما يستخدم Firefox خصائص مختلفة وأقل مرونة.

خصائص WebKit الخاصة بتنسيق شريط التمرير

::-webkit-scrollbar لتنسيق شريط التمرير بالكامل.
::-webkit-scrollbar-track لتنسيق مسار شريط التمرير.
::-webkit-scrollbar-thumb لتنسيق الجزء القابل للسحب.

وهناك خصائص إضافية أقل استخداماً لكنها مفيدة في بعض الحالات:

::-webkit-scrollbar-button لتنسيق أزرار الأعلى والأسفل.
::-webkit-scrollbar-track-piece للجزء غير المغطى من المسار.
::-webkit-scrollbar-corner لتنسيق الزاوية التي يلتقي فيها التمرير الأفقي والعمودي.

خصائص Firefox الخاصة بشريط التمرير

في Firefox يتوفر حالياً عدد محدود من الخصائص:

scrollbar-width لتحديد السماكة، وغالباً ما تقبل auto أو thin.
scrollbar-color لتحديد لون المقبض والمسار بهذا الترتيب.

أمثلة عملية على تصميم شريط تمرير مخصص

1) شريط تمرير داكن يناسب الواجهات المظلمة

إذا كان موقعك يعتمد على مظهر داكن، فإن الشريط الافتراضي قد يبدو غير منسجم مع التصميم. يمكن إنشاء نمط داكن بسيط مع حواف دائرية كما يلي:

html::-webkit-scrollbar {
  width: 20px;
}

html::-webkit-scrollbar-track {
  background-color: black;
}

html::-webkit-scrollbar-thumb {
  background: #4e4e4e;
  border-radius: 25px;
}

هذا النمط يوفّر مساراً أسود ومقبضاً رمادياً داكناً، ما يجعله مناسباً جداً للواجهات الليلية.

مثال على شريط تمرير داكن بتصميم مخصص باستخدام CSS

2) شريط تمرير بسيط وأنيق بأسلوب Minimalist

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

html::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track {
  background: rgb(179, 177, 177);
  border-radius: 10px;
}

html::-webkit-scrollbar-thumb {
  background: rgb(136, 136, 136);
  border-radius: 10px;
}

html::-webkit-scrollbar-thumb:hover {
  background: rgb(100, 100, 100);
  border-radius: 10px;
}

html::-webkit-scrollbar-thumb:active {
  background: rgb(68, 68, 68);
  border-radius: 10px;
}

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

مثال على شريط تمرير بسيط وأنيق بأسلوب Minimalist في CSS

3) شريط تمرير بنقش متكرر

إذا كنت تريد تأثيراً بصرياً مختلفاً، فيمكنك الاستفادة من repeating-linear-gradient() لإنشاء نمط متكرر داخل المسار. كما يمكن إضافة حدود وظلال للمقبض لزيادة التميز.

html::-webkit-scrollbar {
  width: 20px;
}

html::-webkit-scrollbar-track {
  background-image: repeating-linear-gradient(
    45deg,
    red 0,
    red 1px,
    transparent 0,
    transparent 50%
  );
  background-size: 10px 10px;
}

html::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 5px;
  border: 2px solid black;
  box-shadow: inset 1px 1px 5px black;
}

في هذا التصميم تم جعل خلفية المقبض شفافة، بحيث يظهر النمط الموجود في المسار من خلاله أثناء التمرير، وهو تأثير ملفت إذا استُخدم باعتدال.

مثال على شريط تمرير مزخرف بنمط متكرر باستخدام CSS

4) شريط تمرير بتدرج لوني يوحي بالحركة

يمكن أيضاً إنشاء تأثير يبدو وكأن الشريط يتغير لونه أثناء التمرير، وذلك بالاعتماد على linear-gradient() مع حيلة بصرية باستخدام box-shadow.

html::-webkit-scrollbar {
  width: 20px;
}

html::-webkit-scrollbar-track {
  background: linear-gradient(
    0deg,
    rgba(255, 0, 0, 1) 0%,
    rgba(7, 0, 211, 1) 100%
  );
}

html::-webkit-scrollbar-thumb {
  background: transparent;
  box-shadow: 0px 0px 0px 100vh black;
}

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

مثال على شريط تمرير بتدرج لوني يمنح إحساساً بالحركة باستخدام CSS

قيود تخصيص شريط التمرير في CSS

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

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

مكتبات بديلة للحصول على دعم أوسع

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

مكتبة `SimpleBar`

رابط المشروع: https://github.com/Grsmto/simplebar

تُعد مكتبة SimpleBar خياراً ممتازاً إذا كنت تريد إنشاء أشرطة تمرير مخصصة داخل عناصر محددة في الصفحة، مثل نوافذ الدردشة أو الصناديق القابلة للتمرير. ما يميزها هو سهولة الاستخدام، لكن من قيودها أنها ليست الخيار الأفضل لشريط التمرير الرئيسي للموقع بالكامل، كما أن دعمها لبعض العناصر مثل table وtextarea وselect محدود.

مكتبة `OverlayScrollbars`

رابط المشروع: https://github.com/KingSora/OverlayScrollbars

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

مقارنة سريعة بين الحلول المتاحة

الخيار	المزايا	القيود
`CSS` الأصلي	خفيف وسريع ولا يحتاج مكتبات خارجية	دعم غير موحد عبر المتصفحات
`SimpleBar`	سهل ومناسب للعناصر الداخلية	غير مثالي كشريط تمرير رئيسي للصفحة
`OverlayScrollbars`	يدعم `body` ويوفّر مرونة أعلى	يعتمد على مكتبة خارجية وقد يزيد التعقيد

نصائح مهمة قبل اعتماد شريط تمرير مخصص

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

الخلاصة التقنية

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