Как называется прокрутка страницы справа

О панелях прокрутки

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

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

В этом разделе рассматриваются следующие темы.

Части полосы прокрутки

Полоса прокрутки состоит из затененной Шафт с кнопкой со стрелкой на каждой стороне и полем прокрутки (иногда называемым бегунком) между кнопками со стрелками. Полоса прокрутки представляет общую длину или ширину объекта данных в клиентской области окна; поле прокрутки представляет часть объекта, видимого в клиентской области. Расположение поля прокрутки изменяется каждый раз, когда пользователь прокручивает объект данных для отображения другой части. Система также корректирует размер ползунка полосы прокрутки таким образом, чтобы он обозначает, какая часть всего объекта данных в данный момент видна в окне. Если большая часть объекта видна, то поле прокрутки занимает большую часть полосы прокрутки Шафт. Аналогично, если видима только небольшая часть объекта, то поле прокрутки занимает небольшую часть полосы прокрутки Шафт.

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

на следующем снимке экрана показан форматированный элемент управления «поле ввода» с вертикальной и горизонтальной полосами прокрутки, так как они могут отображаться в Windows Vista. Вертикальная полоса прокрутки в данный момент является «активной», так как указатель мыши наводится на него при попытке выполнить снимок экрана.

Стандартные полосы прокрутки и элементы управления полосы прокрутки

Полоса прокрутки включается в окно либо как стандартная полоса прокрутки, либо как элемент управления «полоса прокрутки». Стандартная полоса прокрутки находится в неклиентской области окна. Он создается с окном и отображается при отображении окна. Единственной целью стандартной полосы прокрутки является предоставление пользователю возможности создавать запросы прокрутки для просмотра всего содержимого клиентской области. Можно включить стандартную полосу прокрутки в окно, указав WS _ HSCROLL, WS _ VSCROLLили оба стиля при создании окна. Стиль WS _ HSCROLL создает горизонтальную полосу прокрутки, расположенную в нижней части клиентской области. Стиль WS _ VSCROLL создает вертикальную полосу прокрутки, расположенную справа от клиентской области. _Значения метрик системы SM кксхскролл и SM _ цихскролл определяют ширину и высоту стандартной горизонтальной полосы прокрутки. Значения SM _ кксвскролл и SM _ цивскролл определяют ширину и высоту стандартной вертикальной полосы прокрутки. Стандартная полоса прокрутки является частью связанного окна и поэтому не имеет собственного обработчика окна.

Элемент управления «полоса прокрутки» — это окно управления, которое принадлежит классу окна SCROLLBAR. Появляется элемент управления «полоса прокрутки», который работает как стандартная полоса прокрутки, но является отдельным окном. В отдельном окне элемент управления «полоса прокрутки» принимает прямой фокус ввода. В отличие от стандартной полосы прокрутки, элемент управления «полоса прокрутки» также имеет встроенный интерфейс клавиатуры.

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

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

Приложения могут предоставлять элементы управления «полоса прокрутки» для целей, отличных от прокрутки содержимого окна. Например, приложение-заставка может предоставить полосу прокрутки для настройки скорости перемещения графики на экране.

Элемент управления «полоса прокрутки» может иметь ряд стилей, которые служат для управления ориентацией и положением полосы прокрутки. Нужные стили задаются при вызове функции CreateWindowEx для создания элемента управления «полоса прокрутки». Некоторые стили создают элемент управления «полоса прокрутки», который использует ширину или высоту по умолчанию. Однако необходимо всегда указывать координаты x и y, а также другие измерения полосы прокрутки.

Таблицу стилей элемента управления «полоса прокрутки» см. в разделе стили элементов управления полосы прокрутки.

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

Расположение поля прокрутки и диапазон прокрутки

Приложение обычно корректирует диапазон прокрутки до удобных целых чисел, что упрощает перевод ползунка в значение, соответствующее объекту данных для прокрутки. Например, если приложение должно отображать 260 строк текстового файла в окне, в котором может отображаться только 16 строк, то диапазон вертикальной полосы прокрутки может быть установлен в 1 – 244. Если ползунок находится в позиции 1, первая строка будет находиться в верхней части окна. Если ползунок находится в позиции 244, последняя строка (строка 260) будет находиться в нижней части окна. Если приложение пытается указать значение, которое меньше минимального или максимального значения, вместо него используется минимальное или максимальное значение диапазона прокрутки.

Чтобы установить полезную связь между диапазоном полосы прокрутки и объектом данных, приложение должно скорректировать диапазон при изменении размера объекта данных.

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

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

Видимость полосы прокрутки

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

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

Запросы к полосе прокрутки

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

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

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

_Код запроса SB сумбтракк возникает, когда пользователь перетаскивает ползунок прокрутки. Если приложение обрабатывает _ коды запросов SB сумбтракк, оно может прокручивать содержимое окна, когда пользователь перетаскивает ползунок. Однако в течение короткого периода времени полоса прокрутки может создавать много _ сумбтракк кода запроса SB, поэтому приложение должно обрабатывать эти коды запросов, только если оно может быстро перерисовывать содержимое окна.

Интерфейс клавиатуры для полосы прокрутки

Элемент управления «полоса прокрутки» предоставляет встроенный интерфейс клавиатуры, позволяющий пользователю выдавать прокрутку запросов с помощью клавиатуры. Стандартная полоса прокрутки не имеет. Когда элемент управления «полоса прокрутки» имеет фокус клавиатуры, он отправляет сообщения WM _ HSCROLL и WM _ VSCROLL в родительское окно, когда пользователь нажимает клавиши со стрелками. Код запроса отправляется с каждым сообщением, соответствующим клавише со стрелкой, нажатой пользователем. Ниже приведены клавиши со стрелками и соответствующие коды запросов.

Интерфейс клавиатуры элемента управления «полоса прокрутки» отправляет _ коды запросов верхнего и SB- _ нижней части SB. _Код запроса SB Top указывает, что пользователь достиг верхнего значения диапазона прокрутки. Приложение прокручивает содержимое окна вниз, чтобы отобразить верхнюю часть объекта данных. _Код запроса SB Bottom указывает, что пользователь достиг нижнего значения диапазона прокрутки. Если приложение обрабатывает _ код запроса с самым нижним периодом, он прокручивает содержимое окна вверх, чтобы было видно, что нижняя часть объекта данных является видимой.

Если вам нужен интерфейс клавиатуры для стандартной полосы прокрутки, можно создать его самостоятельно, обрабатывая сообщение WM _ KeyDown в процедуре окна, а затем выполнить соответствующее действие прокрутки на основе кода виртуального ключа, сопровождающего сообщение. Сведения о создании интерфейса клавиатуры для полосы прокрутки см. в разделе Создание интерфейса клавиатуры для стандартной полосы прокрутки.

Прокрутка клиентской области

Самый простой способ прокрутить содержимое клиентской области — стереть его, а затем перерисовать. Это метод, который приложение может использовать с _ кодами запросов SB PageUp, SB _ PageDown и SB _ Top, для которых обычно требуется совершенно новое содержимое.

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

Обычно приложение прокручивает содержимое окна в направлении, противоположном указанному полосой прокрутки. Например, когда пользователь щелкает полосу прокрутки Шафт в области под полем прокрутки, приложение прокручивает объект в окне вверх, чтобы отобразить часть объекта, которая находится ниже видимой части.

Цвета и метрики полосы прокрутки

Источник

Прокрутка в вебе: букварь

Автор — Нолан Лоусон, менеджер проекта Microsoft Edge

Прокрутка — одно из самых древних взаимодействий в вебе. Задолго до появления методов pull-to-refresh и списков бесконечной загрузки скромная полоса прокрутки решила изначальную проблему масштабирования в вебе: как взаимодействовать с контентом, который распространяется за пределы доступной области просмотра?

Сегодня прокрутка всё ещё остаётся самым фундаментальным взаимодействием в Сети, и, возможно, самым неправильно понятым. Например, вы знаете разницу между следующими сценариями?

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

Многопоточный веб

Концептуально, веб является однопоточной средой. JavaScript блокирует DOM, а DOM блокирует JavaScript, потому что оба борются за один и тот же поток, часто называемый «основным потоком» или «потоком UI».

Например, если вы добавите этот (ужасный) сниппет JavaScript на страницу, то немедленно заметите ухудшение в работе:

Пока этот JavaScript крутится в бесконечном цикле, кнопки не работают, элементы форм не реагируют и даже анимированные GIF’ки тормозят — во всех смыслах и отношениях страница зависла. Можете изучить эффект в действии в простом демо.

Более того, если вы попытаетесь прокрутить страницу клавишами «вверх» и «вниз» на клавиатуре, страница предсказуемо застрянет, пока JavaScript не прекратит выполнение. Всё это явные свидетельства нашего представления веба как однопоточной среды.

Есть забавная аномалия: если попробовать прокрутку через тачскрин, то страница отлично прокручивается вверх и вниз, хотя JavaScript и блокирует всё остальное на странице. То же самое относится к прокрутке с тачпада, колесом мыши и прокрутке после захвата страницы курсором click-and-drag (в зависимости от браузера).

Каким-то образом некоторые действия по прокрутке могут изменять состояние страницы, в то время как всё остальное — кнопки, поля ввода данных, GIF’ы — полностью зависло. Как мы можем совместить это с нашей теорией однопоточного веба?

История двух потоков выполнения

Как выясняется, в целом тезис «браузеры однопоточные» правдив, но есть важные исключения. Прокрутка, во всём своём многообразии, является одним из таких исключений.

С годами разработчики браузеров осознали, что выгрузка вспомогательной работы в фоновые потоки может дать значительную выгоду по плавности работы и чувствительности. Прокрутка настолько важна для ключевого опыта работы с браузером, что эту задачу быстро выбрали для такой оптимизации. В наше время все основные браузерные движки (Blink, EdgeHTML, Gecko, WebKit) поддерживают прокрутку за пределами основного потока выполнения в той или иной степени (Firefox последним присоединился к клубу, с версии Firefox 46).

С фоновой прокруткой даже загромождённая страница будет плавно прокручиваться, потому что вся прокрутка выполняется в отдельном потоке. Только если вы попытаетесь взаимодействовать со страницей через некий посторонний механизм, не связанный с прокруткой — нажать клавишу, ввести данные в поле ввода, нажать на ссылку — тогда фасад сбрасывается и суть салонного трюка полностью раскрывает себя. (Учитывая, насколько хорошо он работает, это отличный трюк!)

Правда, у асинхронной прокрутки есть распространённый побочный эффект, который называют эффектом шахматной доски (checkerboarding). Он впервые проявился на в Safari для iOS в виде серых и белых клеток, словно с шахматной доски. В большинстве современных браузеров эффект проявляется как пустое пространство на экране, если вы осуществляете прокрутку быстрее, чем браузер может отрисовать страницу. Это не идеально, но это приемлемый компромисс, по сравнению с заблокированной, дёргающейся или неоткликающейся прокруткой.

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

Здесь будет поучительной небольшая история. Когда впервые вышли операционные системы вроде Windows и macOS, они допускали только один поток выполнения, и мало кто предвидел необходимость предусмотреть одновременный ввод. Только когда появились многоядерные машины, операционные системы начали встраивать параллелизм в свою архитектуру.

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

Однако в группе разработки Microsoft Edge мы делаем успехи, чтобы гарантировать плавный и восприимчивый скроллинг, независимо от его метода. В EdgeHTML 14 (который вошёл в состав Windows 10 Anniversary Update) мы поддерживаем фоновую прокрутку для следующих методов:

По результатам тестирования в Windows 10 (14393, Surface Book) и macOS Sierra (10.12, MacBook Air) мы получили следующие результаты:

Как демонстрирует* эта таблица, поведение прокрутки может драматически изменяться от браузера к браузеру, и даже от одной ОС к другой. Если вы тестируете один метод прокрутки только в одном браузере, то получите весьма неполные результаты производительности своего сайта, по сравнению с тем, как в реальности с ним работают пользователи!

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

Как прослушивающие процессы мешают прокрутке

Фоновая прокрутка даёт ощутимую прибавку в эффективности — прокрутка и JavaScript полностью разделены, позволяя им работать параллельно без помех друг другу.

Но каждый, кто немного разрабатывал веб-страницы, знает, как установить связь между JavaScript и прокруткой:

Менее очевидно влияние такого примера:

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

Обратите внимание, что это относится не только к колесу мыши: на тач-устройствах прокрутка тоже может быть заблокирована прослушивающими процессами touchstart или touchmove.

Нужно быть осторожным, добавляя прослушивающие события на страницу, потому что они влияют на производительность!

Есть несколько интерфейсов JavaScript API, связанных с прокруткой, однако они не блокируют прокрутку. Событие scroll, хотя это в чём-то нелогично, не может блокировать прокрутку, потому что оно запускается после прокрутки, и поэтому является неотменяемым. Также и новый Pointer Events API, представленный в IE и Microsoft Edge, и который недавно начали внедрять в Chrome и Firefox, изначально спроектирован с целью избежать неумышленного блокирования прокрутки.

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

Глобальные и локальные прослушивающие процессы

В предыдущем примере мы видели случай глобального прослушивающего процесса (то есть прикреплённого к window или document). Но что насчёт прослушивающих процессов для индивидуальных элементов прокрутки?

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

Если вы проверите на простой демонстрационной странице, то заметите, что Microsoft Edge и Safari оставят плавную прокрутку для целого документа, если прослушивающий процесс для прокрутки находится в div с независимой прокруткой.

Вот таблица браузеров и их поведения:

Результаты показывают*, что для веб-разработчиков есть доступные оптимизации, чтобы получить пользу от этих функций браузеров. Вместо использования прослушивающих процессов wheel/touch для всего документа, предпочтительно добавить прослушивающие процессы в конкретный подраздел документа, так что прокрутка останется плавной для всех остальных частей страницы. Другими словами, вместо делегирования прослушивающих процессов wheel/touchstart на максимально высокий уровень, лучше всего изолировать их для элемента, где это нужно.

К сожалению, не все фреймворки JavaScript допускают такую практику — в частности, React, как правило, добавляет глобальный прослушивающий процесс ко всему документу даже если тот должен относиться только к части страницы. Однако есть открытый тикет конкретно для этой проблемы, и парни из React сказали, что с радостью примут пулл-реквест. (Уважение парням из React, которые так быстро среагировали на наше предложение)

Пассивный прослушивающий процесс

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

С таким подходом браузер будет обрабатывать прокрутку так, как будто прослушивающий процесс wheel вообще отсутствует. Эта функция уже доступна в последних версиях Chrome, Firefox и Safari, и должна скоро появиться в будущем релизе Microsoft Edge. (Обратите внимание, что нужно применять feature detection для поддержки браузеров, которые не распознают пассивные прослушивающие процессы).

Для некоторых событий (в том числе touchstart и touchmove) Chrome с версии 56 принял решение вмешиваться и сделал их пассивными по умолчанию. Имейте в виду эту незначительную разницу между браузерами, когда добавляете прослушивающие процессы!

Заключение

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

Во-первых, лучше не добавлять прослушивающие процессы wheel или touch к глобальным объектам document или window, а вместо этого добавлять их к меньшим элементам с индивидуальной прокруткой. Разработчикам также следует использовать пассивные прослушивающие процессы, где только возможно, с применением feature detection, чтобы избежать проблем совместимости. Использование Pointer Events (там есть polyfill) и прослушивающих событий scroll — тоже верный способ избежать непреднамеренной блокировки прокрутки.

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

Наша группа Microsoft Edge продолжит инновации в данной области, чтобы обеспечить плавную прокрутку для большего количества сайтов и пользователей. Скажем это для скромного скроллбара — самого старого и неоднозначного взаимодействия в вебе!

* Результаты получены на последней версии каждого браузера в феврале 2017 года. С тех пор Firefox 52 обновил поддержку прокрутки, и теперь соответствует поведению Edge 14 во всех тестах, за исключением скроллинга полосой прокрутки. Надеемся, остальные браузеры тоже сделают улучшения в реализации прокрутки и сделают веб быстрее и более восприимчивым!

Источник