نوارهای پیمایش سفارشی CSS درجه یک و جالب: یک ویترین

در این مقاله به دنیای اسکرول‌بارها می‌پردازیم. می دانم، خیلی جذاب به نظر نمی رسد، اما به من اعتماد کنید، صفحه ای که به خوبی طراحی شده است، با نوار اسکرول منطبق همراه است. نوار اسکرول کروم قدیمی آنقدرها هم جا نمی شود.

ما به دنبال جزئیات نازک نوار پیمایش خواهیم بود و سپس به چند نمونه جالب نگاه خواهیم کرد.

اجزای یک نوار پیمایش

این بیشتر یک تجدید کننده است، واقعا. وجود دارد دسته ای از پست ها در اینجا در CSS-Tricks وقتی صحبت از استایل نوار پیمایش سفارشی در CSS می شود، به جزئیات عمیق می پردازد.

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

دو مؤلفه اصلی که در اینجا باید در نظر داشت عبارتند از:

1. La مسیر پس زمینه زیر نوار است.
2. La شست بخشی است که کاربر روی آن کلیک می کند و آن را می کشد.

ما می‌توانیم ویژگی‌های نوار اسکرول کامل را با استفاده از پیشوند فروشنده تغییر دهیم::-webkit-scrollbar انتخابگر ما می‌توانیم به نوار اسکرول یک عرض ثابت، رنگ پس‌زمینه، گوشه‌های گرد... چیزهای زیادی بدهیم! اگر ما نوار اسکرول اصلی یک صفحه را سفارشی می کنیم، می توانیم از آن استفاده کنیم ::-webkit-scrollbar مستقیماً روی عنصر HTML:

html::-webkit-scrollbar {
  /* Style away! */
}

اگر ما یک جعبه اسکرول را سفارشی می کنیم، نتیجه آن است overflow: scroll، سپس می توانیم استفاده کنیم ::-webkit-scrollbar در عوض روی آن عنصر:

.element::-webkit-scrollbar {
  /* Style away! */
}

در اینجا یک مثال سریع وجود دارد که به نوار پیمایش عنصر HTML استایل می دهد تا پهن با پس زمینه قرمز باشد:

اگر بخواهیم فقط انگشت شست یا مسیر نوار اسکرول را تغییر دهیم، چه؟ درست حدس زدید - ما شبه المان های پیشوند خاصی برای این دو داریم: ::-webkit-scrollbar-thumb و ::-webkit-scrollbar-track، به ترتیب. در اینجا ایده ای وجود دارد که وقتی همه این موارد را کنار هم بگذاریم چه چیزی ممکن است:

مسواک زدن بس است! من می‌خواهم سه درجه از استایل نوار پیمایش سفارشی را به شما نشان دهم، سپس یک ویترین بزرگ از نمونه‌های بیرون کشیده شده از سراسر وب برای الهام را باز کنم.

نوارهای پیمایش ساده و درجه یک

یک نوار پیمایش سفارشی همچنان می تواند حداقل باشد. من گروهی از نمونه‌ها را گرد هم آورده‌ام که ظاهر را به طرز ماهرانه‌ای تغییر می‌دهند، چه با تغییر رنگ جزئی در انگشت شست یا مسیر، یا یک ظاهر سبک در پس‌زمینه.

همانطور که می بینید، وقتی صحبت از استایل نوار اسکرول به میان می آید، مجبور نیستیم دیوانه باشیم. گاهی اوقات یک تغییر ظریف تمام چیزی است که برای بهبود تجربه کلی کاربر با یک نوار اسکرول که با موضوع کلی مطابقت دارد، لازم است.

نوارهای پیمایش جالب و چشم نواز

اما بیایید اعتراف کنیم: این سرگرم کننده است که کمی زیاده روی کنیم و کمی خلاقیت به کار بگیریم. در اینجا چند نوار اسکرول عجیب و منحصر به فرد وجود دارد که ممکن است در برخی موارد "بیش از حد" باشند، اما مطمئناً چشم نواز هستند.

یکی بیشتر…

چطور می‌شود که نوار پیمایش را برای چرخش در قطار برای انگشت شست و مسیر را برای مسیر، خوب، انتخاب کنیم!