در این ویدیو با قابلیت های شخصی سازی اسکرول بار در مرورگر های مختلف آشنا می شویم. با تغییر این قسمت می توان حس بهتری را به کاربر منتقل کرد.
طراحان وب سعی دارند تا روزانه طراحی ها و قابلیت های جدیدی را به ظاهر وبسایت ها اضافه کنند. اما مرورگر ها نمی توانند با تمام سایت ها از نظر ظاهری هماهنگ باشند. این مشکل باعث می شود تا برای مثال نوار پیشایش یا همان scrollbar با ظاهری ساده و شاید قدیمی وجود داشته باشد. شخصی سازی اسکرول بار به طراح کمک می کند تا محیط هماهنگ تری را برای وبسایت ایجاد کنند. پیش تر در آموزش «شخصی سازی تگ سلکت فقط با CSS؛ فرار از ظاهر قدیمی» درباره اهمیت ایجاد تغییرات کوچک در طراحی سایت صبحت کردیم. در این آموزش سراغ یک تغییر ساده و اما بسیار تاثیر گذار رفته ایم.
مرورگر های مختلف و شخصی سازی اسکرول بار
یکی از مشکلات هنگام شخصی سازی scrollbar عدم هماهنگی مرورگر ها است. البته این مشکل تنها برای مرورگر فایرفاکس وجود دارد! شخصی سازی نوار پیشمایش در تمام مرورگر های مدرن، غیر از فایرفاکس، با استفاده از یک روش قابل پیاده سازی هستند. ایجاد این تغییر در مرورگر Firefox شاید ساده تر اما با امکانات بسیار کمتر قابل اجرا است. در این آموزش ویدیویی به روش تغییر و شخصی سازی کامل اسکرول بار برای تمام مرورگر ها به صورت جداگانه پرداخته ایم.
شخصی سازی نوار پیمایش شامل تغییر رنگ ها و ابعاد آن می شود. همچنان می توانیم با استفاده از خاصیت border-radius لبه های اسکرول بار را گرد کنیم. یک نکته دیگر که شاید در مرحله اول به آن توجه نکرده باشید، نوار های افقی هستند. در این آموزش پس از کار با اسکرول بار اصلی صفحه، سراغ نوار های پیمایش افقی نیز می روید. در پایان سعی داریم تا با هماهنگ کردن scrollbar با محیط کلی سایت، در مرورگر های مختلف، تجربه کاربری بهتری برای کاربران داشته باشیم.
کدهاش نیستن که انگار 🥲
معمولا کد قرار نمیدیم که مجبور به نوشتن باشن همه! تمرین میشه اینجوری😁
من ۱۰ سال دنبال این اموزش اسکرول کاستوم افقی بودم دمتوننننن گرمممم
خداروشکر بعد ۱۰ سال!