تم إنشاء c4a.dev لمساعدتك على التركيز أثناء مُشاهدة الكورسات والإبتعاد عن إزعاج اليوتيوب
كيفية الشراء من الموقع

منطقة إعلانية

يُمكننا وضع إعلانك هنا 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك

سعر الإعلان 3$ فى اليوم الواحد

CSS scrollbar style

وهنا سوف نشرح اهم الأكواد الخاصة بتنسيق ال scrollbar

scroll-behavior: smooth;

يُستخدم هذا الكود للإنتقال لقسم اخر في نفس الموقع بسلاسة ونعومة وهنا تجد مثال علي ذلك

وغالباً مايتم اضافة هذا الكود الي عنصر ال html
مثال علي ذلك: html {scroll-behavior: smooth;}

وأكيد انت الوقتي عاوز تعمل scrollbar زي الي موجود في الموقع بتاعنا ... صح ؟ 😃
وانا مش هزعلك يا صديقي 😍
وهذه هي الأكواد المُستخدمة في عمل ال scrollbar الخاص بموقعنا يا صديقي 😃

 
::-webkit-scrollbar {
  width: 1.1rem;
 }
 
::-webkit-scrollbar-track {
  border: 7px solid #232943;
  box-shadow: inset 0 0 2.5px 2px rgba(0, 0, 0, 0.5);
  border-radius: 1rem;
  }
 
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #9e4673, #3d4a59);
  border-radius: 1rem;
}
 
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(270deg, #9e4673, #3d4a59, #9e4673);
}
 
/* for Firefox */
 html {scrollbar-color: #9e4673 #3d4a59;} 

ولا تقلق يا صديقى سوف يتم شرح هذه الأكواد بالتفصيل في الفيديو الخاص بهذا الدرس 😃 وهذه 👇 صورة توضيحية للأكواد التي سوف نستخدمها في الشرح اثناء الفيديو 😃

CSS scrollbar
Scrollbar track VS Scrollbar thumb

وهنا يوجد مشكلة كبيرة جداً وهي ان هذه الاكواد تعمل على جميع المتصفحات ما عدا Firefox – internet explorer

- بالنسبة ل internet explorer ف ملناش دعوه بيه؛ سيبك منه 😂
- بالنسبة ل Firefox في يوجد له اكواد خاصة به وهي:

1 scrollbar-width: thin;

وله ثلاث قيم هي none | thin | auto


2 scrollbar-color: color1 color2;

color1: اللون الخاص بال thumb
color2: اللون الخاص بال track

هذه الاكواد تم اضافتها حديثاً الي ال CSS في September 2020 المصدر

😡
انت مشغل الـ AdBlock !!

خلى بالك يامعلم ✋ انا هكر جامد جداً وعرفت انك مشغل ال AdBlock ف ياريت تقفله بدل ما اولع فى ام الجهاز بتاعك ده 😡 😡