مولّد شريط التمرير بـ CSS
صمّم شريط تمرير ملونًا مخصصًا مع معاينة مباشرة وانسخ كود CSS — متوافق مع WebKit وFirefox.
742 مشاهدة
هذه المنطقة مخصصة لاختبار شريط التمرير المخصص الخاص بك. مرّر للأسفل وشاهد الشريط على اليمين يتبع تصميمك. غيّر الألوان والأحجام؛ تُطبَّق النتيجة على هذا الصندوق فورًا.
هذه المنطقة مخصصة لاختبار شريط التمرير المخصص الخاص بك. مرّر للأسفل وشاهد الشريط على اليمين يتبع تصميمك. غيّر الألوان والأحجام؛ تُطبَّق النتيجة على هذا الصندوق فورًا.
هذه المنطقة مخصصة لاختبار شريط التمرير المخصص الخاص بك. مرّر للأسفل وشاهد الشريط على اليمين يتبع تصميمك. غيّر الألوان والأحجام؛ تُطبَّق النتيجة على هذا الصندوق فورًا.
هذه المنطقة مخصصة لاختبار شريط التمرير المخصص الخاص بك. مرّر للأسفل وشاهد الشريط على اليمين يتبع تصميمك. غيّر الألوان والأحجام؛ تُطبَّق النتيجة على هذا الصندوق فورًا.
هذه المنطقة مخصصة لاختبار شريط التمرير المخصص الخاص بك. مرّر للأسفل وشاهد الشريط على اليمين يتبع تصميمك. غيّر الألوان والأحجام؛ تُطبَّق النتيجة على هذا الصندوق فورًا.
هذه المنطقة مخصصة لاختبار شريط التمرير المخصص الخاص بك. مرّر للأسفل وشاهد الشريط على اليمين يتبع تصميمك. غيّر الألوان والأحجام؛ تُطبَّق النتيجة على هذا الصندوق فورًا.
كيف تُصمَّم أشرطة التمرير باستخدام CSS؟
توجد آليتان: تستخدم متصفحات WebKit (Chrome وEdge وSafari) عائلة العناصر الوهمية ::-webkit-scrollbar، التي تتيح لك تصميم المسار والمقبض والعرض ونصف القطر؛ بينما يستخدم Firefox الخاصيتين المعياريتين الأبسط scrollbar-color وscrollbar-width. يتضمن الكود المُولَّد كلا الأسلوبين، بحيث يبدو شريط التمرير متسقًا في كل مكان.
اضبط الألوان والعرض ونصف القطر؛ تتحرك لوحة المعاينة على اليمين وفق تصميمك المطبَّق، ويتحدّث كود CSS فورًا.
الأسئلة الشائعة
لماذا يبدو شريط التمرير مختلفًا في Firefox؟
يتجاهل Firefox قواعد ::-webkit-scrollbar ولا يراعي سوى scrollbar-color (ألوان المقبض والمسار) وscrollbar-width. نصف القطر وتأثيرات التمرير بالماوس حصرية لـ WebKit؛ يعرض Firefox نسخة مبسّطة.
هل يمكنني تصميم شريط تمرير عنصر واحد فقط؟
نعم — حدّد نطاق المحددات: .my-box::-webkit-scrollbar { … } و .my-box { scrollbar-color: … }. طبّقه على html أو body (أو استخدم المحددات المجردة من هذا المولّد) لتشمل الصفحة بأكملها.
هل تعمل أشرطة التمرير المخصصة على الجوال؟
غالبًا لا: يستخدم iOS ومعظم متصفحات Android أشرطة تمرير عائمة (overlay) تتجاهل هذه الأنماط. اعتبر أشرطة التمرير المخصصة تحسينًا لسطح المكتب فقط.
أدوات مشابهة
الإبلاغ عن مشكلة
مولّد شريط التمرير بـ CSS