Народ, всем привет. Сегодня у нас тема больше для программистов, особенно начинающих. А именно, как можно стилизовать скролл. Кто не помнит, это такая полосочка прокрутки справа или слева страницы или любого блока. Причем стилизовать мы его будем не за счет каких-то плагинов, а по большей части, библиотек, UI-компонентов и прочего на JS, а просто за счет CSS. Вариантов там немного, но все же немного подправить стандартный «серый» скролл можно. Но, самое важно, что нужно понять – стилизовать скролл самой страницы не нужно, это считается плохим тоном, да и вообще, выглядит убого...

Бесит, когда контент «прыгает» вправо-влево на 15–20 пикселей при открытии модалок или смене страниц? Это исчезает и появляется полоса прокрутки. Но решение есть: Свойство scrollbar-gutter резервирует место под скроллбар заранее. Контент стоит как вкопанный, даже если прокрутки в данный момент нет. Как использовать: html{ scrollbar-gutter: stable; } Плюсы этого свойства: ✅ Никаких костылей: Больше не нужно вычислять ширину скролла через JS или calc(100vw - 100%)...

Иногда вы можете обнаружить, что устали от уродливых полос прокрутки браузера при ежедневном просмотре сайтов. К счастью в настоящее время любому программисту или веб-дизайнеру доступно множество готовых инструментов, позволяющих изменить полосы прокрутки и сделать их поистине уникальными и красивыми. Мы подготовили для вас подборку лучших библиотек JavaScript, которые можно использовать для замены и улучшения собственных полос прокрутки при разработке сайтов. React-scrollbars-custom К достоинствам...

Полоса прокрутки - один из наиболее игнорируемых компонентов пользовательского интерфейса, которые не используются многими веб-сайтами для повышения удобства работы своих пользователей. По умолчанию во всем HTML, когда содержимое веб-сайта превышает высоту области просмотра, справа автоматически появляется полоса прокрутки, точно такая же, как на большинстве сайтов. Полоса прокрутки по умолчанию выглядит неплохо, но может быть и лучше. 😊 html::-webkit-scrollbar { width: 16px; height: 16px; } html::-webkit-scrollbar-thumb...