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

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

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المصدر


Do not waste your time and start with us, now 😍