سيوضح لك محرر Downcodes كيفية استخدام CSS لتخصيص نمط شريط التمرير! من الصعب أحيانًا تلبية النمط الافتراضي لأشرطة التمرير في صفحة الويب للاحتياجات الشخصية. ستقدم هذه المقالة بالتفصيل كيفية استخدام العنصر الزائف لشريط التمرير الخاص بـ CSS ::-webkit-scrollbar ومجموعاته الفرعية (::-webkit-scrollbar-thumb, ::. -webkit-scrollbar-track، ::-webkit-scrollbar-button، وما إلى ذلك) لتخصيص الحجم واللون والحد والظل والسمات الأخرى لشريط التمرير لإنشاء تجربة مستخدم أكثر جمالًا. سنتعرف على كيفية تخصيص الأنماط الأساسية لشريط التمرير، وأنماط شريط التمرير والتتبع، وأنماط الأزرار، والتعامل مع التصميمات الأكثر تعقيدًا ومشكلات التوافق المختلفة للمتصفح. تتضمن المقالة أيضًا إجابات للأسئلة المتداولة لمساعدتك على فهم تقنيات تخصيص شريط التمرير في CSS وتطبيقها بشكل أفضل.
المفتاح لتخصيص أنماط شريط التمرير في CSS هو استخدام العنصر الزائف ::-webkit-scrollbar والمجموعات الفرعية للعناصر الزائفة ذات الصلة، مثل:::-webkit-scrollbar-thumb، ::-webkit-scrollbar-track، ::-webkit -زر شريط التمرير وما إلى ذلك. من خلال هذه العناصر الزائفة، يمكنك التحكم في الحجم واللون والحد والظل والخصائص الأخرى لشريط التمرير. من بينها، يتحكم ::-webkit-scrollbar-thumb في نمط شريط التمرير وهو نقطة التخصيص الأكثر شيوعًا. يمكنك ضبط اللون أو الحد أو الزوايا الدائرية أو ظل شريط التمرير لتغيير مظهر شريط التمرير.
يستخدم نمط شريط التمرير المخصص في CSS بشكل أساسي سلسلة العناصر الزائفة ::-webkit التي يدعمها متصفح Webkit الأساسي. يمكن تغيير عرض ولون شريط التمرير عن طريق الإعداد ::-webkit-scrollbar.
على سبيل المثال، قم بتخصيص عرض شريط التمرير إلى 5 بكسل واضبط لون الخلفية على اللون الرمادي:
::-شريط التمرير webkit {
العرض: 5 بكسل؛
لون الخلفية: #f9f9f9؛
}
أضف الظل والزوايا المستديرة إلى شريط التمرير:
::-webkit-scrollbar-thumb {
لون الخلفية: #c1c1c1؛
نصف قطر الحدود: 10 بكسل؛
ظل الصندوق: داخلي 0 0 6px rgba(0,0,0,0.5);
}
للتحكم بدقة في أنماط الإبهام والتتبع في شريط التمرير، يمكنك تحديد أنماط ::-webkit-scrollbar-thumb و::-webkit-scrollbar-track على التوالي.
قم بتخصيص نمط شريط تمرير شريط التمرير لزيادة التأثير التفاعلي:
::-webkit-scrollbar-thumb {
لون الخلفية: #b6b6b6؛
نصف قطر الحدود: 10 بكسل؛
الانتقال: سهولة لون الخلفية بمقدار 0.2 ثانية؛
}
::-شريط التمرير-الإبهام:تحوم {
لون الخلفية: #a8a8a8؛
}
قم بتخصيص نمط المسار لجعل شريط التمرير أكثر اتساقًا مع التصميم العام:
::-webkit-scrollbar-track {
لون الخلفية: #e1e1e1؛
نصف قطر الحدود: 10 بكسل؛
}
يمكن أن تكون أزرار شريط التمرير مهمة للصفحات الطويلة. وهي موجودة على طرفي شريط التمرير، ويمكن تحديد أنماطها باستخدام العنصر الزائف ::-webkit-scrollbar-button.
تجميل زر شريط التمرير وجعل شريط التمرير الإجمالي أكثر تناغمًا:
::-زر شريط التمرير webkit:البدء:النقصان،
::-زر شريط التمرير webkit:end:increment {
عرض: كتلة؛
الارتفاع: 5 بكسل؛
لون الخلفية: #ddd؛
}
في التصميمات الأكثر تعقيدًا، قد تحتاج أيضًا إلى تصميم حالة شريط التمرير. على سبيل المثال، التعامل مع الحالات المختلفة لشريط التمرير (الافتراضي، التمرير، النشط) وزاوية التمرير في عرض التمرير.
قم بتعيين أنماط شريط التمرير لحالات مختلفة لتحسين تجربة المستخدم:
::-webkit-scrollbar-thumb:window-inactive {
لون الخلفية: #b6b6b6؛
}
::-webkit-scrollbar-corner {
لون الخلفية: #f9f9f9؛
}
تحسين التجربة التفاعلية لأشرطة التمرير:
::-شريط التمرير-الإبهام-webkit:نشط {
لون الخلفية: #999999;
}
تجدر الإشارة إلى أن العنصر الزائف ::-webkit-scrollbar وأنماط شريط التمرير ذات الصلة هي ميزات غير قياسية. وهي صالحة فقط في المتصفحات المستندة إلى Webkit kernel مثل Chrome وSafari وما إلى ذلك. ولذلك، لن تصبح هذه الأنماط المخصصة سارية المفعول في المتصفحات الأخرى مثل Firefox أو IE.
لتخصيص نمط شريط التمرير في المتصفحات غير التابعة لـ Webkit، يمكنك استخدام مكتبات JavaScript مثل شريط التمرير المثالي، أو يمكنك التحكم بشكل محدود في النمط من خلال تعيين سمة التجاوز وسلوك التمرير للعنصر.
لضمان تجربة جيدة على المتصفحات غير المدعومة:
إذا كنت بحاجة إلى مراعاة التوافق عبر المتصفحات، فقم بتصميم شريط التمرير لضمان عدم تأثر الوظائف الأساسية، حتى لو لم يكن النمط متسقًا تمامًا. يمكنك أيضًا استكشاف استخدام مكتبات CSS-in-JS أو أدوات JavaScript الأخرى لتنفيذ أنماط شريط التمرير المخصصة المعقدة.
باختصار، يمكن أن يؤدي تخصيص أشرطة التمرير عبر CSS إلى تحسين المظهر الجمالي وتجربة المستخدم لموقع الويب بشكل كبير. ومع ذلك، وبالنظر إلى مشكلات التوافق عبر المتصفحات، توجد أحيانًا مقايضة بين القيام بتخصيص شريط التمرير المعقد أو الاعتماد على حلول تصميم شريط التمرير الجاهزة التي توفرها أطر عمل الواجهة الأمامية.
1. كيفية تخصيص نمط شريط التمرير باستخدام CSS؟
تعد أشرطة التمرير أحد العناصر الشائعة في صفحات الويب، ولكن نمط شريط التمرير الافتراضي قد لا يلبي بالضرورة احتياجات التصميم الخاصة بك. يمكنك استخدام CSS لتخصيص أنماط شريط التمرير لتتناسب مع نمط صفحة الويب الخاصة بك وعلامتك التجارية.
أولاً، تحتاج إلى تحديد شريط التمرير باستخدام محدد العنصر الزائف ::-webkit-scrollbar. بعد ذلك، يمكنك استخدام خصائص CSS المتنوعة لضبط مظهر شريط التمرير، مثل العرض والارتفاع لتحديد حجم شريط التمرير، ولون الخلفية لتعيين لون الخلفية، ونصف قطر الحدود لتعيين الزوايا الدائرية، وهكذا على.
بالإضافة إلى نمط شريط التمرير نفسه، يمكنك أيضًا استخدام ::-webkit-scrollbar-thumb و::-webkit-scrollbar-track لتعيين نمط شريط تمرير شريط التمرير والمسار على التوالي. على سبيل المثال، يمكنك تغيير لون شريط التمرير، ولون خلفية المسار، وما إلى ذلك.
بعد إكمال أنماطك المخصصة، يمكنك تطبيقها في ورقة أنماط CSS لجعلها فعالة. تذكر أنه نظرًا لأن نمط أشرطة التمرير يمكن أن يختلف عبر المتصفحات، فمن الأفضل اختباره وضبطه في متصفحات مختلفة.
2. هل هناك أي احتياطات يجب مراعاتها عند تخصيص نمط شريط التمرير؟
هناك العديد من الاعتبارات التي يجب اتباعها عند تخصيص أنماط شريط التمرير.
أولاً، يجب أن تدرك أن أنماط شريط التمرير قد تختلف عبر المتصفحات. لذلك، تحتاج إلى الاختبار والضبط في متصفحات مختلفة للتأكد من عرض أنماطك بشكل صحيح في كل متصفح.
ثانيًا، انتبه إلى إمكانية الوصول إلى أنماط شريط التمرير. قد يعتمد بعض المستخدمين على أشرطة التمرير للتنقل في محتوى الويب، لذا يجب عليك التأكد من أن أنماطك المخصصة لا تتداخل مع تجربتهم. تأكد من أنه لا يزال من السهل التعرف على أشرطة التمرير وتشغيلها.
وأخيرا، تجنب الإفراط في التصميم. في حين أن أنماط شريط التمرير المخصصة يمكن أن تضيف بعض التخصيص إلى صفحات الويب الخاصة بك، إلا أن الإفراط في تصميمها يمكن أن يصرف المستخدمين عن المحتوى. لذا احتفظ به باعتدال وتأكد من أن نمط شريط التمرير الخاص بك يتوافق مع نمط التصميم العام.
3. هل هناك أي طريقة أخرى لتخصيص نمط شريط التمرير إلى جانب استخدام CSS؟
بالإضافة إلى استخدام CSS لتخصيص أنماط شريط التمرير، يمكنك أيضًا التفكير في استخدام بعض مكتبات الجهات الخارجية أو المكونات الإضافية لتحقيق تأثيرات شريط التمرير الأكثر تعقيدًا.
على سبيل المثال، يمكنك استخدام بعض مكتبات JavaScript الشائعة، مثل PerfectScrollbar أو SimpleBar، والتي توفر المزيد من وظائف تخصيص شريط التمرير المتقدمة، بما في ذلك تأثيرات الرسوم المتحركة لشريط التمرير، والأحداث المخصصة، وسحب شريط التمرير، وما إلى ذلك.
توفر مكتبات الجهات الخارجية هذه عادةً المزيد من الخيارات والمرونة لتلبية احتياجات أنماط شريط التمرير الأكثر تخصيصًا. بالطبع، قد يؤدي استخدام هذه المكتبات أيضًا إلى زيادة بعض تكاليف التعلم والتكامل، لذلك عند الاختيار، يجب عليك أن تقرر ما إذا كنت ستستخدمها بناءً على احتياجاتك المحددة.
آمل أن يساعدك هذا البرنامج التعليمي الذي أعده محرر Downcodes في إتقان طريقة تخصيص أنماط شريط التمرير باستخدام CSS بسهولة وتحسين مستوى تصميم الويب الخاص بك! تذكر أنه في التطبيقات الفعلية، يجب عليك اختيار الحل المناسب بناءً على الاحتياجات المحددة وإجراء اختبارات كافية لضمان التوافق وسهولة الاستخدام ضمن متصفحات مختلفة.