كيفيه عمل تنسيق للscrollbar

توجد العديد من خصائص CSS التي يمكن استخدامها لتنسيق شريط التمرير (scrollbar). إليك بعض الخصائص الأساسية التي يمكن استخدامها:

1.  ::-webkit-scrollbar : يتم استخدامها لتحديد المظهر العام لشريط التمرير.
2.  ::-webkit-scrollbar-track : تحديد خصائص خلفية شريط التمرير.
3.  ::-webkit-scrollbar-thumb : تحديد خصائص مقبض شريط التمرير.
4.  ::-webkit-scrollbar-corner : تحديد خصائص زاوية شريط التمرير.
5.  ::-webkit-scrollbar-button : تحديد خصائص زر شريط التمرير.

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

::-webkit-scrollbar-thumb {
  background-color: #4CAF50; /* تغيير لون مقبض الشريط */
  border-radius: 10px; /* تغيير شكل مقبض الشريط */
  border: 3px solid #fff; /* إضافة حدود لمقبض الشريط */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* تغيير لون مقبض الشريط عند المرور بالفأرة عليه */
}

::-webkit-scrollbar-thumb:active {
  background-color: #999; /* تغيير لون مقبض الشريط عند النقر عليه */
}

::-webkit-scrollbar {
  width: 10px; /* تغيير عرض الشريط */
  height: 10px; /* تغيير ارتفاع الشريط */
}

يمكنك تعديل هذه الخصائص واختيار القيم التي تناسب تصميمك.

ويجب التنبيه إلى:

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

يمكن إضافة الخصائص الخاصة بالـ scrollbar في CSS باستخدام خاصية ::-webkit-scrollbar في حالة استخدام المتصفح "Google Chrome" أو "Safari".

وخاصية ::-moz-scrollbar في حالة استخدام المتصفح "Firefox".

ويمكن استخدام الـ ::-webkit-scrollbar في العديد من المتصفحات الأخرى التي تستخدم محرك "WebKit"، مثل "Opera" و "Microsoft Edge".

على سبيل المثال، يمكن استخدام الكود التالي لإضافة تنسيقات للـ scrollbar في المتصفح "Google Chrome":

/* تنسيقات الـ scrollbar */
body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: #f5f5f5;
}
body::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 10px;
}

في هذا المثال، يتم تحديد عرض وارتفاع الـ scrollbar باستخدام width و height على الـ ::-webkit-scrollbar، ويتم تحديد لون خلفية الـ scrollbar باستخدام background-color على نفس العنصر. ويتم تحديد لون الـ thumb أو المنطقة المتحركة داخل الـ scrollbar باستخدام background-color على الـ ::-webkit-scrollbar-thumb، ويتم تحديد شكل الـ thumb باستخدام border-radius.

يمكنك تنفيذ ذلك عبر تنسيق الselectors الذان اسمهما 

اقتباس

::-webkit-scrollbar-thumb

المسؤل عن الجزء الممسوك من الscrollbar 

و

اقتباس

::-webkit-scrollbar-thumb

المسؤل عن الprogress bar الخاص بالscrollbar فعلى سبيل المثال 

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
  background: red; 
  border-radius: 10px;
}

باستخدام الشفرة السابقة سيصبح لون الجزء الممسوك من الشريط أحمر وله border radius 
بينما يكون الجزء المتبقي له shadow و border radius 

ويوجد أيضًا selectors أخرى خاصة بال scrollbar على سبيل المثال

::-webkit-scrollbar مسؤل عن الcontainer الذي يحتوي على السscrollbar 

::-webkit-scrollbar-button المسؤل عن الأزرار الموجودة في الscrollbar 

وعليكم السلام، يمكن استخدام CSS لتنسيق scrollbar في جميع المتصفحات. هناك عدة خصائص CSS التي يمكن استخدامها لتغيير مظهر scrollbar، مثل width و height و background-color و border-radius وغيرها. 

فيما يلي مثال بسيط على كيفية تغيير لون scrollbar باستخدام CSS:

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

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
}

وهذا المثال يستخدم البادئة -webkit- لأن هذه الخصائص تعمل فقط في متصفحات WebKit (مثل Google Chrome و Safari). لجعل التغييرات تعمل في جميع المتصفحات، يجب استخدام البادئة المناسبة حسب المتصفح.

خطوات مهمة عند تنسيق scrollbar.

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

ثانيًا، يجب استخدام خاصية ::-webkit-scrollbar لإضافة تنسيقات لشريط التمرير في متصفحات Webkit-based (Chrome, Safari, Opera). ولاستخدام هذه الخاصية بشكل صحيح، يجب استخدام اسماء (Pseudo-elements) ::-webkit-scrollbar-track و::-webkit-scrollbar-thumb و::-webkit-scrollbar-button.

وهذه بعض تنسيقات CSS لإضافة لل scrollbar:

1-

::-webkit-scrollbar {
  height: 8px;
}
 
::-webkit-scrollbar-track {
  background-color: #f2f2f2;
}
 
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 20px;
}

2-

::-webkit-scrollbar {
  width: 6px;
}
 
::-webkit-scrollbar-track {
  background-color: #F5F5F5;
}
 
::-webkit-scrollbar-thumb {
  background-color: #000000;
}

3-

::-webkit-scrollbar {
    width: .4em
}
 
::-webkit-scrollbar-track-piece {
    background-color: #fff
}
 
::-webkit-scrollbar-thumb {
    height: .5em;
    background-color: #999
}

4-

::-webkit-scrollbar {
    width: .4em
}
 
::-webkit-scrollbar-track-piece:start{
    background-color:#fff;  
    border-top-left-radius:.5em;  
    border-top-right-radius:.5em;  
} 
 
::-webkit-scrollbar-thumb {  
    height:.3em;  
    width:.3em;  
    border-radius:.15em;  
} 

التعليقات السابقة توضح طريقة تنسيق ال scrollbar بطرق مختلفة ولكن هناك  قيود عند تنسيق ال scrollbar 

من الواضح أن هناك بعض المشكلات في scrollbar مخصصة.

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

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

من المكتبات التي تساعد في صنع ال scrollbar

• مكتبة SimpleBar
• Overlay Scrollbars 

قم بالإطلاع على المكتبات السابقة للتعرف على المميزات الموجودة بها