Полосы прокрутки: Что такое полоса прокрутки?

В приведенном ниже примере использованы псевдоэлементы ::- webkit-scrollbar, ::- webkit-scrollbar-track и ::webkit-scrollbar-thumb.

body::-webkit-scrollbar {
  width: 12px;               /* ширина всей полосы прокрутки */
}

body::-webkit-scrollbar-track {
  background: orange;        /* цвет зоны отслеживания */
}

body::-webkit-scrollbar-thumb {
  background-color: blue;    /* цвет бегунка */
  border-radius: 20px;       /* округлось бегунка */
  border: 3px solid orange;  /* отступ вокруг бегунка */
}

Полоса прокрутки, созданная с помощью этих правил CSS, будет оранжевого цвета с синим бегунком. Бегунок будет занимать не всю ширину зоны отслеживания – с каждой стороны будет отступ в 3 пикселя.

Этот код работает в последних версиях Chrome, Edge и Safari.

К сожалению, W3C официально отказался от этой спецификации и, скорее всего, со временем она станет нерекомендуемой.

Стилизация полос прокрутки в Firefox

В настоящее время оформление полосы прокрутки для Firefox происходит при помощи CSS Scrollbars.

В этом примере мы используем свойства scrollbar-width и scrollbar-color:

body {
  scrollbar-width: thin;          /* "auto" или "thin" */
  scrollbar-color: blue orange;   /* цвет бегунка и зоны отслеживания */
}

Созданная с помощью этих правил полоса будет оранжевого цвета с синим бегунком. В этот раз бегунок не имеет отступов, его ширина совпадает с шириной зоны отслеживания.

Эта спецификация имеет некоторые общие черты со спецификацией -webkit-scrollbar. Однако в настоящее время она не поддерживает настройку отступов и округлости бегунка.

Создание перспективных стилей

CSS можно написать так, чтобы он поддерживал и спецификацию -webkit-scrollbar, и CSS Scrollbars.

В следующем примере мы используем scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::webkit-scrollbar-thumb.

/* Работает в Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Работает в Chrome, Edge и Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: orange;
}

*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

Браузеры Blink и WebKit будут игнорировать правила, которые они не распознают, они применят правила -webkit-scrollbar.

Заключение

В этой статье вы узнали об использовании CSS для оформления полос прокрутки и о том, как обеспечить распознавание этих стилей в большинстве современных браузеров.

Также полосу прокрутки можно имитировать, скрыв стандартную полосу и используя JavaScript для определения высоты и положения новой полосы. Однако такой подход имеет некоторые ограничения при воспроизведении таких действий, как прокрутка с инерцией или затухание движения.

Читайте также: Что такое CSS?

Как вернуть полосу прокрутки в macOS Ventura? Apple отключила и спрятала эту настройку

Mac macOS Ventura Гайды

Как вернуть полосу прокрутки в macOS Ventura? Apple отключила и спрятала эту настройку

Фархад Усманов — 19 марта 2023, 14:00

С релизом macOS Ventura некоторые пользователи компьютеров Apple обратили внимание, что полосы прокрутки в различных приложениях автоматически скрываются, когда они не активны.

По умолчанию в ‌macOS Ventura полоса прокрутки окна видима только при скроллинге мышью или трекпадом. Apple настроила этот элемент интерфейса таким образом, чтобы он соответствовал минималистичному дизайну macOS.

Чтобы изменить настройки отображения полосы прокрутки, необходимо выполнить следующие шаги:

• Откройте «Системные настройки» и перейдите во вкладку «Оформление»;

• В разделе «Показывать полосы прокрутки» выберите опцию «Всегда».

• Готово.

В macOS Monterey и более ранних версиях операционной системы опцию можно найти на вкладке «Общие» в Системных настройках, но в них полоса прокрутки всегда активна по умолчанию.

Здесь же вы можете отключить анимацию пролистывания при нажатии на полосу прокрутки. В этом случае вы сможете быстрее перемещаться к нужному фрагменту страницы.

iGuides в Яндекс.Дзен —  zen.yandex.ru/iguides.ru

iGuides в Telegram — t.me/igmedia

Рекомендации

• Как ускорить компьютер на 25%, изменив всего одну настройку
• RuTracker не работает несколько дней. Как находить и качать торренты через Telegram
• Общаться с ChatGPT теперь можно прямо в Telegram
• Стоит ли покупать iPhone в России в 2023 году? Всё что нужно знать о санкциях, ремонте, App Store и Apple Pay (ОБНОВЛЕНО)

Рекомендации

Как ускорить компьютер на 25%, изменив всего одну настройку

RuTracker не работает несколько дней. Как находить и качать торренты через Telegram

Общаться с ChatGPT теперь можно прямо в Telegram

Читайте также

iPad AliExpress

Китайцы начали подделывать популярные SSD-накопители Samsung. Как распознать фейк?

Samsung Подделка

Обзор смартфона Honor X8a: просто блеск!

Honor

Использование CSS для скрытия полос прокрутки без ущерба для прокрутки

Полоса прокрутки может сделать элегантный веб-сайт похожим на сайт из 90-х, но благодаря новым свойствам CSS мы можем скрыть полосу прокрутки, не влияя на способность наших пользователей прокручивать.

Полоса прокрутки в браузере позволяет пользователю прокручивать страницу вверх и вниз, не отрывая рук от клавиатуры или трекпада, но чтобы сделать страницу более гладкой, некоторые веб-сайты предпочитают вообще скрывать полосу прокрутки.

Это руководство покажет вам, как скрыть полосу прокрутки в нескольких популярных браузерах, используя современные методы CSS. Не теряя больше времени, давайте приступим к делу.

Эта статья будет охватывать:

• Причины скрыть полосу прокрутки
• Скрытие полосы прокрутки
  • В Chrome, Safari, Opera и других браузерах на основе WebKit
  • В IE (Internet Explorer) и Edge
  • В Firefox
• Условное скрытие полосы прокрутки
• Вопросы доступности

N.B., , чтобы получить максимальную отдачу от этой статьи, вы должны иметь базовые знания HTML и CSS

Хотя общепринятой практикой является не нарушать стиль браузера по умолчанию из-за проблем с доступностью, когда дело доходит до полос прокрутки, есть веские причины, по которым их следует скрывать.

Полоса прокрутки обеспечивает визуальную подсказку для использования мыши или клавиатуры для прокрутки вверх и вниз. Однако эта визуальная подсказка не нужна для многих макетов и шаблонов дизайна, в том числе статических, таких как слайд-шоу или галерея продуктов. Скрытие полосы прокрутки сделает прокрутку более плавной и устранит некоторые отвлекающие факторы из общего макета вашего сайта.

Скрытие полосы прокрутки также помогает сэкономить место для другого контента на странице — это может обеспечить более единообразный пользовательский интерфейс на разных устройствах, поскольку разные операционные системы могут отображать полосу прокрутки по-разному.
Однако наиболее распространенной причиной скрытия полосы прокрутки является удобство просмотра на мобильных устройствах.

При просмотре приложения, такого как Facebook, на своем телефоне, большинство пользователей ожидают, что прокрутка будет вертикальной, без горизонтального перемещения, поскольку экраны обычно высокие и узкие. Скрытие полосы прокрутки создает более естественное ощущение и снижает внимание к техническим аспектам просмотра.

В наши дни полосы прокрутки не нужны для большинства веб-сайтов; скрытие их придаст вашему сайту чистый вид, который будет намного более изощренным, чем устаревшие бары. Удаление их с вашего сайта также может помочь увеличить скорость загрузки страницы и размер окна браузера.

Теперь вам может быть интересно, как именно вы избавитесь от этих надоедливых полос, когда они, кажется, не хотят уходить сами по себе. Мы подробно расскажем об этом ниже.

Более 200 000 разработчиков используют LogRocket для улучшения цифрового взаимодействия

Подробнее →

Из-за фундаментальных различий между браузерами не существует универсального способа скрыть полосы прокрутки с помощью CSS. У каждого браузера свой метод, и мы рассмотрим их все ниже.

В Chrome, Safari, Opera и других браузерах на основе WebKit

Чтобы скрыть полосу прокрутки в браузерах на основе WebKit, вы должны использовать псевдоселектор ::-webkit-scrollbar . ::-webkit-scrollbar — это псевдоэлемент в CSS, используемый разработчиками для изменения внешнего вида полосы прокрутки браузера.

С помощью псевдоселектора ::-webkit-scrollbar с полосой прокрутки можно выполнять множество действий. Вы можете изменить стрелки, указывающие вверх и вниз, изменить цвет дорожки, изменить фон и многое другое. Но мы рассмотрим только то, как скрыть полосу прокрутки, не влияя на прокрутку.

Давайте рассмотрим пример.

Во-первых, я собираюсь добавить HTML-код случайного веб-сайта, который я создаю:

 
<голова>
    <мета-кодировка="UTF-8">
    
    
    
    
    
    <ссылка rel="preconnect" href="https://fonts.gstatic.com" перекрестное происхождение>
     googleapis.com/css2?family=Poppins:[email protected]&family=Staatliches&family=Titan+One&display=swap" rel="stylesheet">  
<тело>
   <раздел>
        <навигация>
            
            <дел>
                <я>
                    <ул>
                        
 Главная

                        
 О нас
                        
 Контакт
                        
 Блог
                        
 Цены