أشرطة تمرير CSS مخصصة أنيقة ورائعة: واجهة عرض

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

سننظر في التفاصيل الدقيقة لشريط التمرير ثم نلقي نظرة على بعض الأمثلة الرائعة.

مكونات شريط التمرير

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

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

المكونان الرئيسيان اللذان يجب مراعاتهما هنا هما:

1. • مسار هي الخلفية أسفل الشريط.
2. • إبهام اليد هو الجزء الذي ينقر عليه المستخدم ويسحب حوله.

يمكننا تغيير خصائص شريط التمرير الكامل باستخدام المورد المسبق::-webkit-scrollbar محدد. يمكننا أن نمنح شريط التمرير عرضًا ثابتًا ولون خلفية وزوايا مستديرة ... أشياء كثيرة! إذا كنا نقوم بتخصيص شريط التمرير الرئيسي لصفحة ما ، فيمكننا استخدام ::-webkit-scrollbar مباشرة على عنصر HTML:

html::-webkit-scrollbar {
  /* Style away! */
}

إذا كنا نقوم بتخصيص مربع تمرير فهذا هو نتيجة overflow: scroll، ثم يمكننا استخدامها ::-webkit-scrollbar بدلاً من ذلك على هذا العنصر:

.element::-webkit-scrollbar {
  /* Style away! */
}

فيما يلي مثال سريع يقوم بتنسيق شريط التمرير الخاص بعنصر HTML بحيث يكون عريضًا بخلفية حمراء:

ماذا لو أردنا فقط تغيير إبهام أو مسار شريط التمرير؟ لقد خمنت ذلك - لدينا عناصر زائفة مسبقة خاصة لهذين الاثنين: ::-webkit-scrollbar-thumb و ::-webkit-scrollbar-track، على التوالى. إليك فكرة عما يمكن تحقيقه عندما نجمع كل هذه الأشياء معًا:

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

أشرطة تمرير بسيطة وأنيقة

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

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

بارد أشرطة التمرير لافتة للنظر

لكن دعنا نعترف بذلك: من الممتع أن تفرط قليلاً وتمارس بعض الإبداع. إليك بعض أشرطة التمرير الغريبة والفريدة من نوعها التي قد تكون "أكثر من اللازم" في بعض الحالات ، لكنها بالتأكيد ملفتة للنظر.

مرة اخرى…

ماذا لو أخذنا شريط التمرير للدوران في قطار للإبهام والمسارات للمسار ، حسنًا!