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

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

Автор — Нолан Лоусон, менеджер проекта 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 во всех тестах, за исключением скроллинга полосой прокрутки. Надеемся, остальные браузеры тоже сделают улучшения в реализации прокрутки и сделают веб быстрее и более восприимчивым!

Источник

Для чего нужна полоса прокрутки

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

B.7.1. Назначение горизонтальной и вертикальной полос прокрутки.

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

B.7.2. Расположение полос прокрутки.

B.7.3. Чем управляются линии прокрутки, и какие при этом могут возникнуть сложности?

B.7.4. Основные приемы работы с линиями прокрутки.

Приемы работы с линиями прокрутки.

Действие: поднятие на одну позицию (строку) вверх.

с помощью мыши: выбор кнопки «стрелка вверх » вертикальной линии прокрутки.

с помощью клавиатуры:

нажать клавишу «стрелка вверх «.

Действие: переход на одну позицию (строку) вниз.

с помощью мыши: выбрать кнопку «стрелка вниз » вертикальной полосы прокрутки.

c помощью клавиатуры: нажать клавишу «стрелка вниз»

Действие: перемещение на одну позицию влево.

с помощью мыши: выбор кнопки «стрелка влево » горизонтальной линии прокрутки.

с помощью клавиатуры: нажатие клавиши «стрелка влево «.

Действие: перемещение на одну позицию вправо.

с помощью мыши: выбор кнопки «стрелка вправо » горизонтальной линии прокрутки.

с помощью клавиатуры: нажатие клавиши «стрелка вправо «.

Действие: перемещение текста на один экран вверх.

с помощью мыши : щелчок левой клавишей мыши на вертикальной полосе прокрутки выше маркера.

с помощью клавиатуры: нажатие клавиши PgUp.

Действие: перемещение текста на экран вниз.

с помощью мыши: щелчок левой клавишей на вертикальной полосе прокрутки ниже маркера.

с помощью клавиатуры:

нажатие клавиши PgDn.

Действие: перемещение текста на экран влево.

выбрать участок слева от маркера на горизонтальной полосе прокрутки.

с помощью клавиатуры:

нажатие Ctrl + PgUp.

Действие: перемещение текста на один экран вправо.

с помощью мыши: выбор участка справа от маркера на горизонтальной полосе прокрутки.

с помощью клавиатуры:

нажать клавиши Ctrl + PgDn.

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

Действие: перемещение текста относительно его первоначального положения в окне

а) 1) перемещение маркера вертикальной полосы прокрутки вверх или вниз,

2) Вращением колесика у Microsoft InteliMouse.

б) перемещение маркера горизонтальной полосы прокрутки вправо или влево.

B.7.5. Дополнительные элементы линий прокрутки.

B.7.6. Элементы графического интерфейса, производные от линейки скроллинга.

B.7.6.1. Что такое ползунок?

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

B.7.6.2. Как изменять значения на ползунке?

a) Переместить ползунок мышью, или

b) Щелкнуть мышью на шкале слева (справа) или сверху (снизу) ползунка. При этом однократный щелчок приведет к перемещению ползунка на одно деление, а нажатие и удержание клавиши обеспечивает перемещение ползунка до тех пор, пока Вы не отпустите кнопку или до тех пор, пока ползунок не достигнет позиции курсора.

С помощью клавиатуры:

Нажать клавиши «стрелка влево » («стрелка вправо «) или «стрелка вверх » («стрелка вниз «), в зависимости от расположения ползунка.

B.7.6.3. Что такое счетчик?

B.7.6.4. Как ввести требуемое значение в счетчик?

Требуемое значение можно выставить щелчками мыши по кнопкам.

Замечание автора для Windows 95/98. Если необходимо пролистать счетчик на большое число позиций назад (вперед), то необходимо:

1. Выбрать мышью промежуток между кнопками.

2. Не отжимая кнопки, потянуть мышью этот промежуток вверх (вниз) экрана. При этом курсор мыши не изменит своей формы, однако значение в поле ввода будет изменяться.

3. Выбрав нужный вариант, отпустите кнопку мыши.

С помощью клавиатуры:

Для изменения значения в выделенном счетчике на одну единицу можно также использовать клавиши «стрелка вверх » и «стрелка вниз «.

Требуемое значение можно также набрать на клавиатуре (как в строке редактирования).

B.7.7. Резюме.

Источник

Полосы прокрутки

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

Рис. 1.35. Полосы прокрутки в окне Microsoft Word

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

В нижней части вертикальной полосы прокрутки расположены дополнительные кнопки для навигации по документу (рис. 1.36). Кнопка в виде шарика определяет объект перехода. При ее нажатии открывается небольшое окно, позволяющее выбрать нужный объект (рис. 1.37). С помощью кнопок в виде стрелок можно переходить к предыдущему и следующему объектам выбранного типа.

Рис. 1.36. Управление навигацией по документу с вертикальной полосы прокрутки

Рис. 1.37. Меню, позволяющее выбрать объект перехода

Данный текст является ознакомительным фрагментом.

Продолжение на ЛитРес

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

Создание полосы навигации

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

Генерирование полосы навигации

Генерирование полосы навигации Теперь можно заняться кодом, генерирующим вложенные списки в полосе навигации.Снова откроем Web-страницу index.htm в Блокноте, если уже ее закрыли. Удалим весь HTML-код, формирующий пункты вложенных списков в полосе навигации, но оставим фрагмент,

Создание полосы навигации

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

Генерирование полосы навигации

Генерирование полосы навигации Теперь можно заняться кодом, генерирующим вложенные списки в полосе навигации.Снова откроем Web-страницу index.htm в Блокноте, если уже ее закрыли. Удалим весь HTML-код, формирующий пункты вложенных списков в полосе навигации, но оставим фрагмент,

Streaks (Полосы)

Streaks (Полосы) Создает вокруг ярких участков изображения яркие вертикальные и горизонтальные полосы (рис. 4.39). Рис. 4.39. Исходное изображение (слева) и пример использования фильтра Streaks (Полосы)

Глава 21 Создание газетной полосы

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

Окончательная верстка полосы

Окончательная верстка полосы Окончательная верстка полосы в нашем случае сведется к следующим операциям:• постановка на полосу служебной информации (например, колонтитулов);• наполнение полосы реальным текстом (настоящими программами телепередач, подбор настоящих

Результаты измерения полосы пропускания сообщений

Результаты измерения полосы пропускания сообщений В табл. А.2 приведены результаты измерений на компьютере Sparc под управлением Solaris 2.6, а на рис. А.1 — график этих результатов.Как мы и предполагали, полоса пропускания увеличивается с размером сообщения. Поскольку во многих

А.З. Измерение полосы пропускания: программы

А.З. Измерение полосы пропускания: программы В этом разделе приведены тексты трех программ, измеряющих полосу пропускания каналов, очередей сообщений Posix и System V. Результаты работы этих программ приведены в табл. А.2 и

Измерение полосы пропускания канала

Измерение полосы пропускания канала На рис. А.7 приведена схема описываемой программы. Рис. А.7. Схема программы измерения полосы пропускания каналаВ листинге А.1 приведен текст первой половины программы bw_pipe, измеряющей полосу пропускания канала.Листинг А.1. Функция main,

Измерение полосы пропускания очереди сообщений Posix

Измерение полосы пропускания очереди сообщений Posix В листинге А.5 приведена функция main программы, измеряющей полосу пропускания очереди сообщений Posix. Листинг А.6 содержит функции reader и writer. Эта программа устроена аналогично предыдущей, измерявшей полосу пропускания

Программа измерения полосы пропускания дверей

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

Программа определения полосы пропускания Sun RPC

Программа определения полосы пропускания Sun RPC Поскольку вызовы процедур в Sun RPC являются синхронными, для них действует то же ограничение, что и для дверей (см. выше). В данном случае проще создать две программы (клиент и сервер), поскольку они создаются автоматически

Полосы прокрутки

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

Управление полосой прокрутки

Управление полосой прокрутки При отображении большого текста пользователь может применять полосу прокрутки для перемещения по тексту. Разработчик может использовать сообщение WM_VScroll для программного управления полосой прокрутки. Например, можно использовать этот

4.4.3. Колесико для прокрутки

4.4.3. Колесико для прокрутки На современных мышах имеется колесико прокрутки, позволяющее прокручивать рабочую область документа. Листать страницы документа намного приятнее с помощью колесика, а не клавиш PageUp и

Источник