CSSبرمجة

CSS – أحدث الطرق لتغيير شكل ScrollBars

بعض اﻷحيان يكون شكل ScrollBar اﻹفتراضي للمتصفح لا يتناسب مع شكل موقعنا, وهذا اﻷمر يكون مزعج بعض الشيء, لذالك في هذه المقالة سوف سنرى كيف نقوم بتغيير شكل Scrollbar لموقعنا وجعلها تكون بأي لون نريد.

في اﻷيام اﻷولى للويب, كان من الصعب جدا توحيد أكواد الخاصة ب scrollbar تعمل على جميع المتصفحات, لكن لحسن الحظ في 2018 تم إصدار مشروع من جميعة W3C يسمى CSS Scrollbars, والذي يبدو كأنه طريقة قابلة للتطبيق, لتغيير شكل Scrollbar على جميع المتصفحات.

وعلى مر السنين كان المتصفح Microsoft Internet Explorer الوحيد الذي يدعم أكواد تغيير شكل Scrollbar من خلال CSS, لهذا كانو العديد من المطورين يتجهون إلى تغيير شكل Scrollbar من خلال JavaScript.

لكن اﻹن تم استبدال Internet Explorer ب Microsoft Edge, وقامو بجعل أكواده تقريبا مثل أكواد Chrome و Safari, في CSS, يعني تبدأ ب -webkit-.

مثال:

Chrome/Edge/Safari: نستعمل -webkit-scrollbar
Firefox: نستعمل scrollbar فقط.

Scrollbar في المتصفحات Chrome/Edge/Safari:

إذن كما قلنا لكي تعمل معنا أكواد Scrollbar في المتصفحات Chrome/Edge/Safari يجب أن تبدأ جميع اﻷكواد ب -webkit- كما في المثال:

body::-webkit-scrollbar {
	/* عرض Scrollbar */
	width: 80px;
}
body::-webkit-scrollbar-track {
	/* تلوين منطقة التي يتحرك فيها Scroll */
	background: red;
}
body::-webkit-scrollbar-thumb {
	/* تغيير لون Scroll */
	background-color: blue;

	/* تدوير أركان الإطار Scroll */
	border-radius: 100px;

	/* خاصة بحجم ونوع ولون اﻹطار Scroll */
	border: 3px solid yellow;
}

لكن هناك خبرين, خبر مفرح 😍 و خبر سيء 😔.

الخبر الجيد: هو أن هذا الكود يعمل بشكل جيد من النسخ اﻷخيرة من هذه المتصفحات (Chrome و Edge و Safari) 😍.

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

في يناير 2020 تم رسميا تحويل محرك Microsoft Edge إلى محرك Chromium.

Scrollbar في المتصفح Firefox:

Firefox هو بطل معايير W3C دائما ، وهو على استعداد لتجربة واجهات. على هذا النحو ، فإن ميزات CSS Scrollbars الجديدة متاحة بالفعل في الإصدارات العادية من Firefox:

html {
	/*
	عرض Scrollbar, وتكون قيمتها إما "auto" أو "thin"
	auto: تعني سيكون عرض Scrollbar افتراضي
	thin: تعني سيكون عرض Scrollbar نحيف أو رقيق
	*/
	scrollbar-width: thin;

	/*
	تلوين Scroll و المنطقة التي يتحرك فيها Scroll,
	للتلوين وتأخد لونين, لون اﻷول لل Scroll في حالتنا هو لون اﻷزرق (blue), ولون ثاني للمنطة التي يتحرك فيها Scroll في حالتنا هو لون البرتقالي (orange)
	*/
	scrollbar-color: blue orange;
}

ربما لاحظت بعض الاختلافات مقارنةً بأكواد Scrollbar الخاصة ب -Webkit-.

إنها طريقة اﻷكثر اختصارا, لكنها تفتقر إلى ميزات مثل تدوير إطار Scroll وأيضا لا يمكنك أن تجعل عرض Scroll كما تريد مثل ما في -webkit-, لكن ربما يتم تضمين هذه الميزات المفقودة في اﻹصدارات الجديدة.

الكود النهائي

لكي يعمل معنا شكل Scrollbar بالشكل الجديد على جميع المتصفحات نكتب هذا الكود للتعميمه على جميع مكونات صفحة HTML و أيضا جعله يعمل في جميع المتصفحات.

/* هذه معيار W3C وتعمل حاليا فقط على Firefox */
* {
	scrollbar-width: thin;

	scrollbar-color: blue orange;
}

/* هذه تعمل على Chrome/Edge/Safari */
*::-webkit-scrollbar {
	width: 80px;
}
*::-webkit-scrollbar-track {
	background: red;
}
*::-webkit-scrollbar-thumb {
	background-color: blue;

	border-radius: 100px;

	border: 3px solid yellow;
}

ملاحظة: قم بتغيير اﻷلوان وحجم Scroll بالتي تناسب موقعك, قمنا بعملها مختلفة لكي يظهر لك الفرق وتفهم تلك اﻷكواد جيدا.

قم بتغيير المتصفح إلى النسخة الحديثة من Firefox/Chrome/Safari/Edge وسترى اﻹختلاف في Scrollbar.

الوسوم
اظهر المزيد

admin

اللهم علمنا ما ينفعنا وانفعنا بما علمتنا انك انت العليم الحكيم .. إسمي زكرياء الزحتي، من المغرب، من مواليد 1993 م في مدينة طنجة، مهتم في، (البرمجة - تطوير أنظمة وتطبيقات الويب - قواعد البيانات - تصميم صفحات الويب - أنظمة لينكس) . اكتب بما فيه فائدة للآخرين هنا .. سواءاً عن التقنية أو التجارب الشخصية أو مواضيع متنوعة .. اكتب وأدون تجاربي واشارككم بعض اللحظات والمواضيع المفيدة ..

مقالات ذات صلة

‫2 تعليقات

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى
إغلاق