Практика использования спецификации css scroll snap

Примеры кода с полосой прокрутки

Пример 1

Условие примера 1

1. На пользовательской форме VBA Excel расположены элементы управления ScrollBar1 и Label1.
2. Необходимо задать для полосы прокрутки ScrollBar1 интервал значений от -100 до 100 единиц с шагом 5 и отображением текущего значения на элементе Label1.
3. При открытии формы полоса прокрутки должна быть установлена на значении 0.

Решение примера 1

Первоначальные настройки при открытии пользовательской формы:

Обработка события Change объекта ScrollBar1:

Обе процедуры размещаются в модуле пользовательской формы VBA Excel.

Пример 2

Условие примера 2

1. На пользовательской форме расположены элементы управления ScrollBar1 и TextBox1.
2. Интервал значений для полосы прокрутки ScrollBar1 от 0 до 1000 единиц с шагом 10 и отображение текущего значения в поле элемента TextBox1.
3. При открытии формы полоса прокрутки должна быть установлена в значение 0.
4. Установка соответствующего значения полосы прокрутки при ручном изменении содержимого текстового поля.
5. Предусмотреть сообщение о значении TextBox1, не входящем в интервал значений элемента управления ScrollBar1.

Решение примера 2

Первоначальные настройки при открытии пользовательской формы:

Обработка события Change объекта ScrollBar1:

Обработка события Change объекта TextBox1:

Если содержимое элемента управления TextBox1 не соответствует интервалу значений полосы прокрутки, возникает ошибка (преобразование в число происходит автоматически). Чтобы ее избежать и вывести сообщение о недопустимости значения, используется обработчик ошибок.

Все три процедуры размещаются в модуле пользовательской формы.

Альтернативные конструкции

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

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

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

Scroll Bar Visibility

The system hides and disables a standard scroll bar when equal minimum and maximum values are specified. The system also hides and disables a standard scroll bar if you specify a page size that includes the entire scroll range of the scroll bar. This is the way to temporarily hide a scroll bar when it is not needed for the content of the client area. There is no need to make scrolling requests through the scroll bar when it is hidden. The system enables the scroll bar and shows it again when you set the minimum and maximum values to unequal values and when the page size does not include the entire scroll range. The ShowScrollBar function can also be used to hide or show a scroll bar. It does not affect the scroll bar’s range, page size, or scroll box position.

The EnableScrollBar function can be used to disable one or both arrows of a scroll bar. An application displays disabled arrows in gray and does not respond to user input.

Изменение точек привязки

Свойство scroll-snap-align задаётся дочерним элементам. Это те самые точки привязки, про которые шла речь при изучении значений mandatory и proximity свойства scroll-snap-type. Доступные значения scroll-snap-align — start, center и end.

Чтобы было проще понять разницу, посмотрите на этот пример:

See the Pen
Scroll Snap start, center, end by Pochemuta (@pochemuta)
on CodePen.

У первого и второго элементов значение start, у третьего — center, — у четвёртого и пятого — end. Прокрутите содержимое контейнера вверх и вниз. Проследите, как меняется позиция каждого элемента.

При горизонтальной прокрутке привязка работает аналогичным образом. Start в таком случае — левый край контейнера, end — правый край.

3

ЕЩЁ

Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

Angular

Если вы читали другие мои статьи про Angular, то знаете, что я большой любитель декларативного подхода. Этот случай не станет исключением. Постараемся написать код максимально аккуратно. В качестве примера возьмем вертикальную прокрутку, для горизонтальной все будет идентично. Добавим в шаблон ползунок:

Для задания его внешнего вида используются геттеры:

Теперь нам нужно просто слушать скролл, чтобы запускать проверку изменений, — и наш компонент начнет работать с колесиком или трекпадом. Осталось научиться двигать ползунки мышкой. Эту логику стоит вынести в отдельную директиву, но для прозрачности сейчас мы это делать не будем.

Добавим обработчики на ползунок:

А в коде компонента будем обрабатывать эти события и слушать :

Теперь ползунки тоже работают.

Hide Scrollbars But Keep Functionality

To hide the scrollbars, but still be able to keep scrolling, you can use the following code:

Example

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {  display: none;}/* Hide scrollbar
for IE, Edge and Firefox */.example {  -ms-overflow-style: none;  /*
IE and Edge */  scrollbar-width: none;  /* Firefox */}

Webkit browsers, such as Chrome, Safari and Opera, supports the non-standard pseudo element, which allows us to modify the look of the browser’s scrollbar. IE and Edge supports the property,
and Firefox supports the property, which allows us to hide the scrollbar, but keep functionality.

❮ Previous
Next ❯

Исследования

В отчете Уильяма Бакстона и Брэда Майерса за 1986 год были протестированы различные способы взаимодействия двумя руками, включая прокрутку, щелчок и изменение размера. В их исследовании щелчок и изменение размера выполнялись параллельно. В первом эксперименте участникам предлагалось выполнить задачу выбора / позиционирования, а во втором эксперименте участникам предлагалось выполнить сложную задачу навигации / выбора. Исследование показало, что пользователи могут выполнять эти задачи быстрее и параллельно, когда они используют обе руки, но не обязательно, когда они используют обе руки одновременно. Они также обнаружили, что чем более взаимосвязанными были задачи, которые пользователь выполнял каждой рукой, тем быстрее они выполняли задачи, которые их просили выполнить.

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

Как добавлять скроллинг куда-угодно?

Давайте попробуем показать, как работают классы Canvas и Scrollbar вместе. Для этого создадим программу, которая будет загружать изображение, которое и изменяет размеры контейнера. После того, как нажать на кнопку «Загрузить изображения», она исчезает, а в элемент класса Canvas добавляется картинка, размер которой больше, чем у самого контейнера. В качестве такого изображения может использоваться любой графический файл.

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

Обратите внимание на скроллбары, которые появились после того, как был вставлен в окно логотип Python. 

Интерфейс скроллинга стандартный у виджета Canvas. Кроме этого, данный элемент обладает методом create_window(), который предусматривает, что файл будет располагаться в той же папке.

import tkinter as tk

class App(tk.Tk):

    def __init__(self):

        super().__init__()

        self.scroll_x = tk.Scrollbar(self, orient=tk.HORIZONTAL)

        self.scroll_y = tk.Scrollbar(self, orient=tk.VERTICAL)

        self.canvas = tk.Canvas(self, width=300, height=100,

                                xscrollcommand=self.scroll_x.set,

                                yscrollcommand=self.scroll_y.set)

        self.scroll_x.config(command=self.canvas.xview)

        self.scroll_y.config(command=self.canvas.yview)

        self.frame = tk.Frame(self.canvas)

        self.btn = tk.Button(self.frame, text=”Загрузить изображение”,

                             command=self.load_image)

        self.btn.pack()

        self.canvas.create_window((0, 0), window=self.frame,

                                  anchor=tk.N + tk.W)

        self.canvas.grid(row=0, column=0, sticky=”nswe”)

        self.scroll_x.grid(row=1, column=0, sticky=”we”)

        self.scroll_y.grid(row=0, column=1, sticky=”ns”)

        self.rowconfigure(0, weight=1)

        self.columnconfigure(0, weight=1)

        self.bind(“”, self.resize)

        self.update_idletasks()

        self.minsize(self.winfo_width(), self.winfo_height())

    def resize(self, event):

        region = self.canvas.bbox(tk.ALL)

        self.canvas.configure(scrollregion=region)

    def load_image(self):

        self.btn.destroy()

        self.image = tk.PhotoImage(file=”python.gif”)

        tk.Label(self.frame, image=self.image).pack()

if __name__ == “__main__”:

    app = App()

    app.mainloop()

Теперь давайте разбирать этот код подробно, шаг за шагом. Рассмотрим принципы работы скроллбаров в Tkinter, и разберемся, как сделать окно адаптивным в случае, если, например, изменяется его размер. 

Примечания

Если значение свойства KeepScrollBarsVisible равно True, любая полоса прокрутки всегда видна на форме или странице, независимо от того, попадает ли содержание объекта в границы объекта.

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

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

Для однострочного элемента управления можно отобразить горизонтальную полосу прокрутки, используя свойства ScrollBars и AutoSize. Полосы прокрутки скрываются или отображаются в соответствии со следующими правилами:

• Если для свойства ScrollBars задано значение fmScrollBarsNone, полоса прокрутки не отображается.

• Если для свойства ScrollBars задано значение fmScrollBarsHorizontal или fmScrollBarsBoth, для элемента управления отображается горизонтальная полоса прокрутки, если текст длиннее области редактирования и если элемент управления содержит достаточно места, чтобы разместить полосу прокрутки под его областью редактирования.

• Если для свойства AutoSize задано значение True, элемент управления увеличивается, чтобы вместить добавленную полосу прокрутки, если размер элемента управления максимален или близок к максимальному.

Для многолинейной textBox можно отобразить панели прокрутки с помощью свойств ScrollBars, WordWrap и AutoSize. Полосы прокрутки скрываются или отображаются в соответствии со следующими правилами:

• Если для свойства ScrollBars задано значение fmScrollBarsNone, полоса прокрутки не отображается.

• Если для свойства ScrollBars задано значение fmScrollBarsVertical или fmScrollBarsBoth, для элемента управления отображается вертикальная полоса прокрутки, если текст длиннее области редактирования и если элемент управления содержит достаточно места, чтобы разместить полосу прокрутки вдоль правого края его области редактирования.

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

• Горизонтальная полоса прокрутки может отображаться в многострочном элементе управления в случае одновременного выполнения следующих условий:

  • Область редактирования содержит слово, оказывающееся длиннее ширины области редактирования.
  • Для элемента управление включено использование горизонтальных полос прокрутки.
  • В элементе управления достаточно места для размещения полосы прокрутки под областью редактирования.
  • Для свойства WordWrap задано значение False.

Methods

Click on the method name to open a more detailed documentation.

Instance methods:

//get options
var options = instance.options();
//set options
instance.options({ className : null });

//soft update
instance.update();
//hard update
instance.update(true);

//put the instance to sleep
instance.sleep();

//get scroll information
var scrollInfo = instance.scroll();
//scroll 50px on both axis
instance.scroll(50);
//add 10px to the scroll offset of each axis
instance.scroll({ x : "+=10", y : "+=10" });
//scroll to 50% on both axis with a duration of 1000ms
instance.scroll({ x : "50%", y : "50%" }, 1000);
//scroll to the passed element with a duration of 1000ms
instance.scroll($(selector), 1000);

//scroll-animation duration is 10 seconds
instance.scroll({ y : "100%" }, 10000);
//abort the 10 seconds scroll-animation immediately
instance.scrollStop();
//scroll-animation duration is 1 second
instance.scroll({ y : "100%" }, 1000);

//get the element to which the plugin was applied
var pluginTarget = instance.getElements().target;

//get the state of the plugin instance
var pluginState = instance.getState();

//destroy the instance
instance.destroy();

//get the instance of the extension "myExtension"
var extensionInstance = instance.ext("myExtension");

//add the registered extension "myExtension" to the plugin instance
var extensionInstance = instance.addExt("myExtension");

//add the registered extension "myExtension" to the plugin instance
instance.addExt("myExtension");
//remove the added extension "myExtension" from the plugin instance
instance.removeExt("myExtension");

Global methods:

//get the current defaultOptions
var defaultOptions = OverlayScrollbars.defaultOptions();
//set new default options
OverlayScrollbars.defaultOptions({
    className : "my-custom-class",
    resize    : "both"
});

//get the global information
var globals = OverlayScrollbars.globals();

//register a dummy extension with the name "myExtension"
OverlayScrollbars.extension("myExtension", function() { return { }; });
//unregister the extension with the name "myExtension"
OverlayScrollbars.extension("myExtension", null);
//get the extension-object with the name "myExtension"
var registeredExtension = OverlayScrollbars.extension("myExtension");
//get all registered extension-objects
var extensionObjects = OverlayScrollbars.extension();

//create OverlayScrollbars instance
var osInstance = OverlayScrollbars(document.body, { });
//returns true
OverlayScrollbars.valid(osInstance);
//destroy the instance
osInstance.destroy();
//returns false
OverlayScrollbars.valid(osInstance);
//returns false
OverlayScrollbars.valid({ });

Добавление CSS-класса, когда элемент появляется при скролле (прокрутке страницы вверх-вниз)

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

Вот три способа определить, когда элемент находится в видимой области окна:

1. Использовать Intersection Observer API
2. Измерять смещение элемента при скролле страницы
3. Использовать стороннюю JavaScript-библиотеку, которая реализует №1 или №2

Для базовой анимации с запуском при скролле, оптимально использование Intersection Observer API, потому что он требует меньше кода, удобнее и лучше с точки зрения производительности.

API-интерфейс Intersection Observer позволяет отслеживать момент пересечения одного элемента с другим, и сообщает, когда это происходит. Этот способ идеально подходит для запуска CSS-анимации при скролле страницы. Всё, что нужно знать — когда HTML-элемент пересекается с окном просмотра. Если он пересекается, значит — находится в видимой области окна и в этот момент надо запустить CSS-анимацию.

Intersection Observer API можно рассматривать, как обычный слушатель событий, но с некоторыми дополнительными опциями. Вместо того, чтобы прикреплять прослушивание событий к HTML-элементу, надо заставить наблюдателя отслеживать элемент и его положение на странице.

Начнём с создания наблюдателя и заставим его отслеживать HTML-элемент:

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

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

В функции обратного вызова можно перебрать массив записей, чтобы указать, что с ними нужно сделать. Каждая запись имеет свойство , которое может быть или . Если оно возвращает , это означает, что элемент находится в видимой области окна (viewport).

Собираем всё вместе

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

Теперь, когда HTML-элемент пересекает границы окна браузера, ему будет добавлен CSS-класс, который будет воспроизводить анимацию.

See this code Use IntersectionObserver API for add class name on x.xhtml.ru.

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

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

Теперь надо наблюдать за HTML-элементом c CSS-классом а класс для анимации применять к элементу с классом , как и прежде. Когда элемент-оболочка находится за пределами видимой области, нужно удалять CSS-класс у элемента , чтобы анимация перезапускалась каждый раз, когда элемент появляется в окне при скролле.

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

See this code Use IntersectionObserver API for add-remove class name on x.xhtml.ru.

Теперь — порядок! Добавляя и удаляя CSS-класс каждый раз, когда при скролле страницы HTML-элемент входит в область просмотра, запускается CSS-анимация.

Стилизация скролла CSS и JQuery

Полосы прокрутки реализованы там, где длина контента превышает ширину окна контейнера. Благодаря этому вы получаете возможность стилизовать iframe, элементы div и поле ввода текста. В iframe и текстовой области окна браузеры автоматически добавляют полосу прокрутки в нижней части, когда содержимое выходит за пределы видимой области. Тем не менее, в контейнерах необходимо предоставлять дополнительную информацию для браузеров. Установка свойству overflow значения scroll говорит браузерам о том, что нужно выводить полосы прокрутки в случае переполнения окна контентом:

//Контейнер, заполненный контентом	
.container {
    width: 100px;
    height: 100px;
    overflow: scroll;
}

Это код scrolling CSS покажет полосу прокрутки такой (справа)

Keyboard Interface for a Scroll Bar

A scroll bar control provides a built-in keyboard interface that enables the user to issue scrolling requests by using the keyboard; a standard scroll bar does not. When a scroll bar control has the keyboard focus, it sends WM_HSCROLL and WM_VSCROLL messages to its parent window when the user presses the arrow keys. The request code is sent with each message corresponding to the arrow key the user has pressed. Following are the arrow keys and their corresponding request codes.

Note

The keyboard interface of a scroll bar control sends the SB_TOP and SB_BOTTOM request codes. The SB_TOP request code indicates that the user has reached the top value of the scrolling range. An application scrolls the window content downward so that the top of the data object is visible. The SB_BOTTOM request code indicates that the user has reached the bottom value of the scrolling range. If an application processes the SB_BOTTOM request code, it scrolls the window content upward so that the bottom of the data object is visible.

If you want a keyboard interface for a standard scroll bar, you can create one yourself by processing the WM_KEYDOWN message in your window procedure and then performing the appropriate scrolling action based on the virtual-key code that accompanies the message. For information about how to create a keyboard interface for a scroll bar, see Creating a Keyboard Interface for a Standard Scroll Bar.

Магия CSS

Без нее, конечно, не обойтись. Во-первых, нам нужно скрыть нативные скроллбары. Это уже можно сделать во всех браузерах. Для этого есть стандартное правило , которое на данный момент работает как раз только в Firefox. Для старых версий Edge и IE есть его аналог . Однако IE мы поддерживать не будем, так как нам понадобится . В Chrome и Safari уже давно можно использовать псевдоселектор .

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

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

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

Ползункам зададим , чтобы поднять их выше контента, а также минимальную ширину 100%. Получим следующую картину:

Ползунки заняли все место, сдвинув содержимое вправо. При этом прокрутка работает и ползунки никуда не деваются. Остается добавить им , чтобы они «подвинулись» и освободили место под содержимое компонента.

How To Create Custom Scrollbars

Chrome, Edge, Safari and Opera support the non-standard pseudo element, which allows us to modify the look of the browser’s scrollbar.

The following example creates a thin (10px wide) scrollbar, which has a grey track/bar
color and a dark-grey (#888) handle:

Example

/* width */::-webkit-scrollbar {  width: 10px;}/* Track */
::-webkit-scrollbar-track {  background: #f1f1f1; }/* Handle */
::-webkit-scrollbar-thumb {  background: #888; }/* Handle on hover */::-webkit-scrollbar-thumb:hover { 
background: #555; }

This example creates a scrollbar with box shadow:

Example

/* width */::-webkit-scrollbar {  width: 20px;}/* Track */
::-webkit-scrollbar-track {  box-shadow: inset 0 0 5px
grey;   border-radius: 10px;}/* Handle */::-webkit-scrollbar-thumb {
 
background: red;   border-radius: 10px;}

Goals & Features

• A simple, powerful and good documented API.
• High browser compatibility (IE8+, Safari6+, Firefox, Opera, Chrome and Edge).
• Usage of the most recent technologies to ensure maximum efficiency and performance on newer browsers.
• Can be used without any dependencies or with jQuery.
• Automatic update detection — after the initialization you don’t have to worry about updating.
• Extremely powerful scroll method with features like animations, relative coordinates, scrollIntoView and more.
• Mouse and touch support.
• Textarea and Body support.
• RTL Direction support. (with normalization)
• Simple and effective scrollbar-styling.
• Rich extension system.
• TypeScript support.

Настройка направления и строгости привязки

Свойство scroll-snap-type задаётся контейнеру и позволяет указать направление, в котором происходит привязка прокрутки (x или y), а также строгость привязки (none, mandatory или proximity).

С направлением всё просто:

• горизонтальная прокрутка — x или ключевое слово inline:
• вертикальная прокрутка — y или ключевое слово block;
• привязка в обоих направлениях — both.

Чуть сложнее увидеть разницу между значениями mandatory и proximity, которые определяют строгость привязки:

• none — нет привязки к точке;
• mandatory — обязательное смещение прокрутки к указанной точке;
• proximity — смещение происходит только в тех ситуациях, когда область видимости находится близко к точке привязки. Степень близости браузер определяет самостоятельно.

Главный плюс mandatory — предсказуемость. Вы знаете, что браузер точно сместит область видимости к заданной точке. Главный минус — негибкость. Например, если содержимое при вертикальной прокрутке слишком большое по высоте, то пользователи окажутся в неприятной ситуации — они просто не смогут переместиться к определённому месту, браузер будет сразу перекидывать их к точке привязки.

See the Pen
Scroll Snap mandatory by Pochemuta (@pochemuta)
on CodePen.

Текст не помещается в области видимости по высоте, последние строчки невозможно прочитать, потому что срабатывает строгая привязка к прокрутке. Чтобы такого эффекта не было, можно заменить mandatory на proximity. Но и здесь остаётся опасность пролистывания — всё зависит от браузера. Проблему можно решить с помощью свойства scroll-padding, о котором мы поговорим ниже.

2