اجرا نشدن استایل اسکرول بار

سلام دوست عزیز وقت بخیر
من خودم از توی css استایل اسکرول بار رو اینجوری تغییر میدم میتونید از این کد استفاده کنید

/* Scroll width */
::-webkit-scrollbar {
    width: 6px;
}

/* Scroll Background */
::-webkit-scrollbar-track {
    background: #bebebe;
}

/* Scroll Foreground */
::-webkit-scrollbar-thumb {
    background: #345ebe;
    border-radius: 15px;
}

/* Scroll Foreground Hover */
::-webkit-scrollbar-thumb:hover {
    background: #25396f;
}

کامنت هم گذاشتم بدونید هر کدوم برای کدوم قسمته این برای تغییر اسکرول بار دیفالت هست

دمت گرم
فقط چطوری ارتفاعشو کم کنیم (خدشو میخوام مثل دایره طوری باشه)
آخه استایل های ارتفاع کار نمیکنن

منظورتون از ارتفاع رو نمیفهمم ارتفاع کجاشو؟ با عکس اگه میتونین نشون بدین

منظورم اون ارتفاع اون مربع وسطه
که باهاش بالا پایین میریم(موقعیتتو نشون میده)میخوام اون که مثل مستطیله
رو تبدیل به یه مربع کوچیک کنم

دوست عزیز اون ارتفاع بر اساس محتوا بزرگ و کوچیک میشه اگه محتوا کم باشه یعنی باید کم اسکرول بشه و ارتفا زیاد میشه و مواقعی که محتوا زیاد باشه اسکرول کوچیک میشه که کاربر بدونه چقدر باید اسکرول کنه

سلام،

برای ساخت scrollbar کاستوم باید از ::-webkit-scrollbar استفاده کنید. به طور مثال، این کد CSS می‌تونه scrollbar عمودی رو سفارشی کنه:

::-webkit-scrollbar {
    width: 7px;
    height: 120px;
}

::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 5px;
}

::-webkit-scrollbar-track {
    background: #eee;
}

::-webkit-scrollbar: این سلکتور عمومی هست که برای تعریف سفارشی کردن scrollbar استفاده میشه.
::-webkit-scrollbar-thumb: این سلکتور برای طرح مشخص کردن کنترل اسکرول و کشیدن استفاده میشه. مثلاً می‌تونید رنگ، شکل، حاشیه و ... تغییر بدید.
::-webkit-scrollbar-track: این سلکتور برای تعریف سفارشی background track (پشت‌زمینه خط) استفاده میشه.
برای صفحه‌های با نوار اسکرول کاستوم می‌تونید از دستور زیر استفاده کنید:

body::-webkit-scrollbar {
    width: 12px;
}

body::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}

body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.2);
}

می‌تونید خصیصه‌ی width رو تغییر بدید تا عرض نوار اسکرول رو تنظیم کنید. به جای body می‌تونید از هر مولفه‌ی دیگه‌ای که نیاز دارید استفاده کنید.

امیدوارم که این کمک کننده باشه. در صورت بروز هرگونه مشکل یا سوال دیگری، در خدمت هستیم.