تغيير شكل Scrollbar بطريقة جديدة كليا ولكن ستجعل من إضافات ومواضيع مقالاتك أكثر إحترافية 2022
السلام عليكم، الشيء المدعو Scrollbar ليس بالجديد ولن يكون جديد وهو شيء عادي ولكن
فقط من لديه خبرة في التصميم والتطوير يعرف كل مايمكنه فعله عبر هذه الخاصية وأصبح
الكل يظن أن تصلح مع الموقع بشكل عام يعني أنه لن تعمل أو لن تنجح لو أضفناه في
مكان غير شريط التمرير العام الموجود في أي موقع ولكن لأخبرك بأنه خطأ لأن هذه
الخاصية تعمل مع أشياء عديدة مثل صندوق الأكواد أو الجدول العادي الذي يضم عدة صفوف
أو الخ... المهم درس اليوم سيكون جديد تماما عن المحتوى العربي وأظن حسب بحثي
أنه غريب حتى عن المحتوى الأجنبي دعونا نباشر في الدرس هيا.
خاصية Scrollbar
هي بالإنجليزية وتعني شريط التمرير وكل مستخدم ويب يعرف أنه يتواجد في المواقع
وحتى البرامج عندما تنزل للأسفل أو تصعد للأعلى يظهر هذا شريط ويمكنك منه تسريع
عملية التنقل ولكن هناك مواقع شكل الشريط الخاص بها يختلف عن أخرى ولكن هذا بشكل
عام ولكن هناك مواقع مثلي أنا تستخدم نفس العملية على إضافات معينة مثل صندوق
الأكواد وهذا بشكل خاص
كيفية التغيير على شريط التمرير
العناصر المتوفرة لتخصيص شريط التمرير في متصفحات الويب هي التالية:
:: - webkit-scrollbar {} / * شريط التمرير * /
:: - webkit-scrollbar-button {} / * السهام * /
:: - webkit-scrollbar-thumb {} / * مؤشر التمرير * /
:: - webkit-scrollbar-track {} / * حاوية شريط التمرير * /
:: - webkit-scrollbar-track-piece {} / * شريط التمرير * /
:: - webkit-scrollbar-corner {} / * الزاوية السفلية من أشرطة التمرير * /
:: - webkit-resizer {} / * شريط السحب لتغيير الحجم * /
عليك فقط استخدام تلك التي تحتاجها للتعديلات وليس من الضروري استخدام جميع
القواعد ومع ذلك دعونا نجرب إنشاء كود بسيط ولكن ملاحظة الكود التالي ليس له دخل
بدرس اليوم ولكن فقط ضفناه لتفهم مانفعله اليوم
/* */
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
إذا كنت تريد معرفة المزيد عنها ، أوصي بمقالة
scroll bars
حول أشرطة التمرير
طريقة تركيب الأداة المطلوبة:
أكيد هناك نسبة 86٪ من القراء لم يفهموا معنى درس اليوم ولكي أريكم الأشرطة
الرئيسية لليوم وأيضا لتفهموا درس اليوم هذا الجزء يوجد فيه الأشرطة الرئيسية
لدرس اليوم
كما لاحظتم أنني هنا وضعت الأشرطة داخل ديفات بدون وضعها في الشريط العام
للمدونة تتعبر هذه الطريقة جديدة كليا ولن يفهمها أحد بسرعة المهم هكذا الٱن
فهمتني وإن لم تفهمني إذهب الٱن وإصعد قليلا أرأيت تلك الصناديق الخاصة
بالأكواد تحتوي على شريط تمرير خاص ومميز جدا يجعل من الصندوق جميل
ومتناسق.
الٱن إذهب الى لوحة تحكم بلوجر ثم قسم المظهر ثم تعديل HTML وإبحث عن
</b:skin> وضع فوقه أحد هذه الأكواد:
ملاحظة... عندما تضع أحد هذه الأكواد لاتحفظ القالب لأنه توجد تعديلات مهمه
حول الكود وأيضا لاتخف هذه الأكواظ بيست محدودة حيث أنه في نهاية المقال ستجد
طريقة التعديل على الأكوا. لإنشاء كود خاص بك
شريط التمرير الأبيض
body::-webkit-scrollbar {
width: 8px;
}
body::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
background-color: #dfdfdf;
border-radius: 10px;
}
شريط التمرير النحيل
body::-webkit-scrollbar {
width: 5px;
}
body::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
background-color: #11171a;
border-radius: 10px;
}
شريط التمرير الأسود
body::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 10px;
}
شريط التمرير البرتقالي
body::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
background-color: #e78632;
background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
border-radius: 10px;
}
شريط تمرير مجرة
body::-webkit-scrollbar {
width: 15px;
}
body::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.1);
}
body::-webkit-scrollbar-thumb {
background-image: linear-gradient(45deg, #00aeff, #a68eff);
border-radius: 10px;
-webkit-box-shadow: rgba(0,0,0,.12) 0 3px 13px 1px;
}
شريط التمرير الأخضر
body::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
background-color: #aab74d;
background-image:-webkit-linear-gradient(rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
border-radius: 10px;
}
تعديل الكود
تغيير الكود صعب جدا حتى على أصاحب خبرة في لفل 1 في css ولكن الأكواد
السابقة أكواد فريدة ولكن هناك إحدى الأكواد السابقة سهل التعديل عليه
وأيضا مميز لأنك عندما تضيف شيئا عليه لن يبعثر الشكل بسسب نحالته
يمكنك الإنتقال للكود من هنا وغير
هذا #11171a بكود اللون الرئيسي لمدونتك وهذه الصفحة مخصصة
لتوليد مثل هكذا أكواد
من هنا للدخول
الٱن هذا هو الجزء الأهم حيث أن الأكواد التي ضفتها سابقا لن تفيدك
بشيء غير أنها تقوم بتغيير شكل شريط السحب العام ولكن نحن نريد أن نضيف
الشريط لأداة أو إضافة معينة ولفعل ذلك قم بإضافة هذه العلامة
الإنجليزية , بعدbody وبعدها نوع الكود أو
كلاس الإضافة أو أيد/ي الخاص بها المهم ضف المعرف خاص بها وإن لم تفهم
الطريقة فلا تقلق قثد وفرنا صندوق التعليقات للإستفسار المهم الٱن ضف
بعد معرف الكود الذي ضفته سابقا هذه الأكواد:
إن كان الحزء الذي تعدله فيه هو
body::-webkit-scrollbar فقم بإضافة هذا بعد المعرف الجديد
::-webkit-scrollbar وإن كنت تعدل على هذا
الجزء body::-webkit-scrollbar-track فقم بلإضافة هذا
بعده ::-webkit-scrollbar-track والٱن إن كنت تعدل على هذا
الجزءbody::-webkit-scrollbar-thumb فضف هذا بعده فضف هذا
بعده ::-webkit-scrollbar-thumb ودعني لاأذكرك أنك صعب أن
تفهم الدرس لهذا يمكنك الإستفسار في التعليقات.
akram lam
just writer and ui&ux designer and web devolper
