Товаров: 0 (0р.)

Scroll style css: scrollbar | CSS-Tricks

Содержание

Создание стилей панелей прокрутки с помощью CSS

Введение

В сентябре 2018 г. комитет W3C в документе CSS Scrollbars определил спецификации настройки внешнего вида панелей прокрутки с помощью CSS.

В 2020 году 96% пользователей Интернета запускали браузеры, поддерживающие стили панелей прокрутки CSS. Однако, чтобы реализовать поддержку Blink, WebKit и браузеров Firefox, нужно написать два набора правил CSS.

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

Предварительные требования

Для понимания этой статьи вам потребуется:

Создание стилей панелей прокрутки для Chrome, Edge и Safari

Для создания стилей панелей прокрутки для Chrome, Edge и Safari требуется псевдоэлемент -webkit-scrollbar с префиксом поставщика.

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

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}

Это снимок экрана панели прокрутки, созданной с помощью этих правил CSS:

Данный код работает с последними версиями браузеров Chrome, Edge и Safari.

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

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

Для создания стилей панелей прокрутки для Firefox используются новые CSS Scrollbars.

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

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */
}

Это снимок экрана панели прокрутки, созданной с помощью этих правил CSS:

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

Создание готовых к будущему стилей панели прокрутки

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

-webkit-scrollbar, и спецификацию CSS Scrollbars.

В этом примере используются свойства scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::webkit-scrollbar-thumb:

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Works on Chrome, Edge, and 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. Браузеры Firefox игнорируют правила, которые они не распознают, и применяют правила CSS Scrollbars. Когда в браузерах Blink и WebKit полностью перестанет использоваться спецификация -webkit-scrollbar, они постепенно перейдут на новую спецификацию CSS Scrollbars.

Заключение

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

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

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

overflow | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+3.61.0+1.0+1.0+

Краткая информация

Значение по умолчаниюvisible
НаследуетсяНет
ПрименяетсяК блочным элементам
Процентная записьНеприменима
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/visufx.html#propdef-overflow

Версии CSS

Описание

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

Синтаксис

overflow: auto | hidden | scroll | visible | inherit

Значения

visible
Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
hidden
Отображается только область внутри элемента, остальное будет скрыто.
scroll
Всегда добавляются полосы прокрутки.
auto
Полосы прокрутки добавляются только при необходимости.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>overflow</title>
  <style>
   .layer {
    overflow: scroll; /* Добавляем полосы прокрутки */
    width: 300px; /* Ширина блока */
    height: 150px; /* Высота блока */
    padding: 5px; /* Поля вокруг текста */
    border: solid 1px black; /* Параметры рамки */
   } 
  </style>
 </head>
 <body> 
   <div>
   <h3>Duis te feugifacilisi</h3>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
    Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div> 
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства overflow

Объектная модель

[window.]document.getElementById(«elementID»).style.overflow

Браузеры

Internet Explorer до версии 7.0 включительно:

  • не поддерживает значение inherit;
  • относительно позиционированные дочерние элементы, значения overflow у которых заданы как auto или scroll ведут себя словно у них задано position: fixed.

Internet Explorer 8:

  • Сочетание overflow со значением scroll со свойствами max-height и float может привести к пропаданию элементов веб-страницы, в браузере выводится пустой экран.
  • Для блока, у которого указаны свойства float и overflow со значением scroll, игнорируется ширина, заданная через свойство max-width.
  • Высота блока с горизонтальной полосой прокрутки увеличивается на высоту скролбара, хотя по спецификации CSS заданные размеры должны включать в себя и полосы прокрутки.
Firefox 3.6 некорректно применяет overflow к группам ячеек таблицы (<thead>, <tbody>, <tfoot>).

Стиль overflow:scroll полоса прокрутки с css



Могу ли я спроектировать полосу прокрутки, которая поставляется с overflow:scroll элемента? Например, дать ему радиус границы, чтобы он стал круглее?

css overflow
Поделиться Источник evollove     08 мая 2014 в 08:04

2 ответа

  • overflow:scroll в css

    У меня есть элемент, который я стилизовал под overflow:scroll, но он выглядит плохо, потому что полоса прокрутки загромождает страницу. Есть ли какой-нибудь способ сделать так, чтобы полоса прокрутки отображалась только тогда, когда кто-то наводит курсор мыши на элемент?

  • Полоса прокрутки css стиль в Интернете Explorer

    У меня есть эта проблема, когда я делаю полосу прокрутки как для iPad, так и для браузеров. Этот стиль отлично работает с Opera, Safari, Firefox и хромом. Однако стиль не отображается в Internet Explorer, и на странице тоже появляется проводная горизонтальная полоса прокрутки. Ссылку на эту…

Поделиться Joan.bdm     08 мая 2014 в 08:07


0

Вы можете стилизовать полосы прокрутки в определенной степени как в браузерах webkit, так и в браузерах IE, однако для Firefox такого CSS не существует, поэтому вам придется прибегнуть к использованию плагина Javascript

Webkit CSS Свойства 

::-webkit-scrollbar  
::-webkit-scrollbar-button  
::-webkit-scrollbar-track  
::-webkit-scrollbar-track-piece    
::-webkit-scrollbar-thumb  
::-webkit-scrollbar-corner  
::-webkit-resizer

Интернет Explorer CSS Свойства 

scrollbar-face-color
scrollbar-shadow-color
scrollbar-highlight-color
scrollbar-3dlight-color
scrollbar-darkshadow-color
scrollbar-track-color
scrollbar-arrow-color

Firefox / Другие Javascript Библиотеки

  1. Идеальная полоса прокрутки
  2. Крошечная полоса прокрутки
  3. Контрольная полоса прокрутки

Поделиться SW4     08 мая 2014 в 08:25

Похожие вопросы:


Полоса прокрутки не кликабельна/перетаскиваема

У меня есть небольшая проблема на веб-сайте, где блок внутри веб-сайта имеет overflow:scroll с заданной высотой, эта полоса прокрутки имеет некоторые пользовательские элементы webkit. Проблема в…


Полоса прокрутки только в одном div

Скажем, например, у меня есть два divs вот так: <body> <div id=header> MY CONTENTS </div> <div id=main> MY OTHER CONTENTS </div> </body> Первый div имеет атрибуты…


css полоса прокрутки переполнения появляется даже тогда, когда прокручивать нечего

Я использую overflow:scroll, как и приведенный ниже код, проблема заключается в том, что даже если текста нет, полоса прокрутки все равно отображается. демо на w3schools:…


overflow:scroll в css

У меня есть элемент, который я стилизовал под overflow:scroll, но он выглядит плохо, потому что полоса прокрутки загромождает страницу. Есть ли какой-нибудь способ сделать так, чтобы полоса…


Полоса прокрутки css стиль в Интернете Explorer

У меня есть эта проблема, когда я делаю полосу прокрутки как для iPad, так и для браузеров. Этот стиль отлично работает с Opera, Safari, Firefox и хромом. Однако стиль не отображается в Internet…


Полоса прокрутки для contentplaceholder

как сделать так , чтобы полоса прокрутки страницы отверстия влияла только на ConentPlaceHolder, я использую style= overflow:scroll; height: 500px; , но он делает специальную полосу прокрутки для…


Скрыть полосу прокрутки с включенным overflow:scroll

Мне нужно скрыть полосу прокрутки на div, который имеет overflow:scroll; включен, так что div будет прокручиваться с помощью мыши и клавиатуры, но сама полоса прокрутки не будет отображаться. есть…


Используя overflow:scroll, скройте неиспользуемую полосу прокрутки в Firefox

У меня есть div с overflow:scroll . В Chrome, если строка текста слишком длинная, появится полоса прокрутки. Если линия не слишком длинная, полоса прокрутки не появится. Это и есть желаемое…


jQuery Datatable-горизонтальная полоса прокрутки с Bootstrap CSS

В jQuery datatable горизонтальная полоса прокрутки не появляется, когда я включаю bootstrap css. Я знаю, что некоторые стили переопределяют datatable. Может ли кто-нибудь помочь мне, какой стиль…


ненужная горизонтальная полоса прокрутки отображается на overflow:scroll

Я пытаюсь сделать веб-сайт на одной странице, причем каждый раздел страницы занимает точно такой же размер экрана пользователя (используя backstrech для фона). Вот так: http:/ / projects.lukehaas.me…

Как использовать CSS Scroll Snap?

Scroll Snap позволяет настраивать скроллинг страницы с помощью CSS и без JavaScript. Сегодня я покажу, как использовать данную технологию.

Scroll Snap реализует красивую прокрутку без необходимости использования JavaScript-библиотек. Данная технология привязывает скроллинг, блокируя область просмотра для каждой прокрутки в определенной точке, которую вы указываете.

CSS Scroll Snap использует два основных свойства: scroll-snap-type и scroll-snap-align. Что нужно знать о них:

  • Свойство scroll-snap-type, применяется к родительскому контейнеру. Оно принимает два аргумента: направление привязки и поведение привязки.
.container {
 scroll-snap-type: [ x | y | block | inline | both ] [ mandatory | proximity ];
}

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

  • Свойство scroll-snap-align применяется к дочерним элементам контейнера.

В нем вы указываете точку привязки для оси x и оси y:

.children {
 scroll-snap-align: [ none | start | end | center ]{1,2};
}

Но ни одно из этих свойств не будет работать, если указать свойство overflow для контейнера и не установить для него фиксированную высоту. При этом нельзя использовать mandatory, если содержимое внутри одного из дочерних элементов длиннее, чем родительский контейнер. Иначе пользователь просто не сможет увидеть контент.

Есть еще два свойства, с которыми нужно ознакомиться:

  1. scroll-padding (применяется к родительскому контейнеру) – это свойство похоже на свойство padding и действует как смещение. Также есть свойства scroll-padding-top, scroll-padding-bottom, scroll-padding-left и scroll-padding-right.
  2. scroll-margin (применяется к дочерним элементам контейнера) похоже на margin и служит для установки начального значения. Также есть свойства scroll-padding-top, scroll-padding-bottom, scroll-padding-left и scroll-padding-right .

Чтобы узнать больше обо всех свойствах CSS Scroll Snap, ознакомьтесь с документацией Mozilla.

Чтобы помочь вам лучше понять эту технологию, я создала небольшую карусель в стиле Instagram.

В нее входят семь блоков различных размеров. Добавьте приведенные ниже строки CSS-кода, чтобы реализовать автоматическую прокрутку с привязкой к каждому блоку.

<style>
.container {
    width: 60vw;
    height: 70vh;
    margin: 15vh auto;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    color: white;
    background-color: oldlace;
    display: flex;
    align-items: center;
}

.child {
    margin-left: 0.5rem;
    height: 90%;
    scroll-snap-align: start;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.child:nth-child(1n) {
    background-color: darkorchid;
    flex: 0 0 80%;
}

.child:nth-child(2n) {
    background-color: indigo;
    flex: 0 0 60%;
}

.child:nth-child(3n) {
    background-color: navy;
    flex: 0 0 40%;
}

.child:nth-child(4n) {
    background-color: palegreen;
    flex: 0 0 50%;
}

.child:nth-child(5n) {
    background-color: yellow;
    flex: 0 0 80%;
}

.child:nth-child(6n) {
    background-color: orange;
    flex: 0 0 60%;
}

.child:nth-child(7n) {
    background-color: tomato;
    flex: 0 0 80%;
}
</style>

Scroll Snap хорошо поддерживается во всех современных браузерах.

Единственная проблема – это Internet Explorer, который требует более старой версии спецификаций. Их можно найти здесь.

Также я бы посоветовала использовать для контейнера свойство -webkit-overflow-scrolling: touch, чтобы добавить поддержку iOS-устройств.

CSS Scroll Snap помогла мне сэкономить часы работы. Попробуйте реализовать подобное решение с помощью JavaScript. Тогда вы поймете, что именно я имею в виду.

Данная публикация является переводом статьи «How to use CSS Scroll Snap» , подготовленная редакцией проекта.

CSS свойство scroll-behavior

Свойство scroll-behavior определяет, должно ли поведение прокрутки внутри прокручиваемого блока быть плавным или резким.

Свойство scroll-behavior, указанное для body элемента, не будет распространяться на окно просмотра. Оно должно быть указано для html элемента.

Значение по умолчаниюauto
ПрименяетсяК блокам с прокруткой.
НаследуетсяНет
АнимируемоеНет
ВерсияCSSOM View Module (Working Draft)
DOM синтаксисobject.style.scrollBehavior = «smooth»;

Синтаксис¶

scroll-behavior: auto | smooth | initial | inherit;

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      html {
      scroll-behavior: auto;
      }
      #element1 {
      height: 600px;
      background-color: #ccc;
      }
      #element2 {
      height: 600px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства scroll-behavior</h3>
    <div>
      <h3>Element 1</h3>
      <a href="#element2">Прокрутите, чтобы увидеть Element 2</a>
    </div>
    <div>
      <h3>Element 2</h3>
      <a href="#element1">Прокрутите, чтобы увидеть Element 1</a>
    </div>
  </body>
</html>
Попробуйте сами!

Пример со значением «smooth»:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      html {
      scroll-behavior: smooth;
      }
      #element1 {
      height: 600px;
      background-color: #ccc;
      }
      #element2 {
      height: 600px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства scroll-behavior</h3>
    <div>
      <h3>Element 1</h3>
      <a href="#element2">Прокрутите, чтобы увидеть Element 2</a>
    </div>
    <div>
      <h3>Element 2</h3>
      <a href="#element1">Прокрутите, чтобы увидеть Element 1</a>
    </div>
  </body>
</html>
Попробуйте сами!

Значения¶

ЗначениеОписание
autoРезкая прокрутка между элементами.
smoothПлавная прокрутка между элементами.
initialУстанавливает свойство в значение по умолчанию.
inheritЗначение элемента наследуется от родительского элемента.

Как создать собственную полосу прокрутки

Узнайте, как создать настраиваемую полосу прокрутки с помощью CSS.

Пользовательские полосы прокрутки

Примечание: Пользовательские полосы прокрутки не поддерживаются в Firefox или Edge, предыдущая версия 79.

Как создавать собственные полосы прокрутки

Chrome, Edge, Safari и Opera поддерживают нестандартный псевдоэлемент :: - webkit-scrollbar , который позволяет нам изменять внешний вид полосы прокрутки браузера.

В следующем примере создается тонкая (шириной 10 пикселей) полоса прокрутки с серой дорожкой / полосой. цвет и темно-серая (# 888) ручка:

Пример

/ * ширина * /
:: — webkit-scrollbar {
width: 10px;
}

/ * Дорожка * /
:: — webkit-scrollbar-track {
background: # f1f1f1;
}

/ * Дескриптор * /
:: — webkit-scrollbar-thumb {
background: # 888;
}

/ * Обработка при наведении * /
:: — webkit-scrollbar-thumb: hover {
фон: # 555;
}

Попробуй сам »

В этом примере создается полоса прокрутки с тенью блока:

Пример

/ * ширина * /
:: — webkit-scrollbar {
width: 20px;
}

/ * Дорожка * /
:: — webkit-scrollbar-track {
box-shadow: inset 0 0 5px серый;
радиус границы: 10 пикселей;
}

/ * Ручка * /
:: — webkit-scrollbar-thumb {
фон: красный;
радиус границы: 10 пикселей;
}

Попробуй сам »

Селекторы полосы прокрутки

Для браузеров webkit вы можете использовать следующие псевдоэлементы для настройки полосы прокрутки браузера:

  • :: - webkit-scrollbar полоса прокрутки.
  • :: - webkit-scrollbar-button кнопки на полосе прокрутки (стрелки указывают вверх и вниз).
  • :: - webkit-scrollbar-thumb перетаскиваемый маркер прокрутки.
  • :: - webkit-scrollbar-track трек (индикатор выполнения) полосы прокрутки.
  • :: - webkit-scrollbar-track-piece дорожка (индикатор выполнения), НЕ закрываемая ручкой.
  • :: - webkit-scrollbar-corner нижний угол полосы прокрутки, где и горизонтально, и встречаются вертикальные полосы прокрутки.
  • :: - webkit-resizer перетаскиваемый маркер изменения размера, который появляется в нижнем углу некоторых элементов.


цвет полосы прокрутки | CSS-уловки

Свойство scrollbar-color управляет двумя цветами полосы прокрутки: цветом ползунка и цветом дорожки . scrollbar-color является частью проекта уровня 1 модуля полос прокрутки рабочей группы CSS, работа над которым на момент написания этой статьи все еще продолжается.

До scrollbar-color у разработчиков не было стандартного способа изменить внешний вид полос прокрутки браузера по умолчанию, не прибегая к скрытию полосы прокрутки с помощью overflow: hidden и отрисовки полос прокрутки на основе JavaScript или использования атрибутов полосы прокрутки с префиксом браузера. С другой стороны, с scrollbar-color мы можем стилизовать полосу прокрутки в соответствии с дизайном, не прибегая к повторному использованию функций браузера или использованию префиксов поставщиков.

 .scrollable-element {
  цвет полосы прокрутки: красный желтый;
}
Выбирайте нестандартные цвета

scrollbar-color также принимает значения dark и light , чтобы соответствовать предпочтениям пользователя, если они используют что-то вроде темного режима в Mac OSX.

  .scrollable-element {
  цвет полосы прокрутки: темный;
}

По состоянию на март 2019 года поддержка значений dark и light недоступна ни в одном браузере. поддерживается в Firefox.См. Подробности в разделе поддержки браузера ниже.

Синтаксис 

  цвет полосы прокрутки: авто | темный | свет | <цвет>;

Значения

scrollbar-color принимает следующие значения:

  • auto является значением по умолчанию и будет отображать стандартные цвета полосы прокрутки для пользовательского агента.
  • dark укажет пользовательскому агенту использовать более темные полосы прокрутки для соответствия текущей цветовой схеме.
  • light сообщит пользовательскому агенту, что нужно использовать более светлые полосы прокрутки для соответствия текущей цветовой схеме.
  • <цвет> определяет два цвета, которые будут использоваться для полосы прокрутки. Первый цвет предназначен для «большого пальца» или подвижной части полосы прокрутки, которая появляется сверху. Второй цвет предназначен для «дорожки» или фиксированной части полосы прокрутки.

Пример

Он сочетает в себе новый синтаксис спецификации и префикс WebKit.

Поддержка браузера

Настольный ПК
мобильный
Chrome Firefox IE Edge Safari
95 * 92 11 92 *
Android Chrome Android Firefox Android iOS Safari
91 * Нет 91 * 14.5-14,7 *

Связанные

Ресурсы

ширина полосы прокрутки | CSS-уловки

Свойство scrollbar-width в CSS управляет шириной или «толщиной» полосы прокрутки. scrollbar-width является частью проекта уровня 1 модуля полос прокрутки рабочей группы CSS, работа над которым еще не завершена. На момент написания этой статьи было достигнуто согласие в отношении того, что ширины полосы прокрутки , вероятно, будут включены в будущие версии CSS, но есть споры о том, будет ли разрешен аргумент переменной , или будут ли параметры ограничены предварительно установленными значениями (подробнее об этом позже).

Регулировка ширины полосы прокрутки особенно важна на страницах или пользовательских интерфейсах с ограниченным пространством, где обрезка всего нескольких пикселей от полосы прокрутки (или ее полное удаление) может дать содержимому достаточно места для дыхания, не удаляя возможность прокрутки.

Например, представьте себе интерфейс редактирования текста, в котором