Использование плавной прокрутки и ее недостатки
1 апреля 2019 | Опубликовано в css | Нет комментариев »
Создать плавную прокрутку сейчас намного легче, чем раньше. Если нужно, чтобы она постоянно присутствовала на веб-странице и можно, чтобы браузер отвечал за ее продолжительность, достаточно всего одной строки кода CSS:
html { scroll-behavior: smooth; }
Но пользователи не любят плавную прокрутку. Конечно, неудобно, что нельзя задать продолжительность плавной прокпуики, но дело не только в этом. Основное, что расстраивало пользователей, был поиск по веб-странице. Одно дело нажать на ссылку и плавно приблизиться к соответствующему заголовку, что в целом интересно, а совсем другое — медленно подбираться к нужным словам во время поиска, когда хочется быстро найти ответ. Пользователям веб-сайта кажется, что прокрутка между результатами поиска по странице медленная и раздражающая. И мы с ними согласны.
Это странно, но даже варианту плавной прокрутки, созданному с помощью кода JavaScript, нельзя настроить скорость:
document.querySelector('.hello').scrollIntoView({ behavior: 'smooth' });
Также не существует надежного способа определить, происходит ли в данный момент поиск по веб-странице, чтобы изменить пользовательский интерфейс, например, отключив плавную прокрутку.
Возможно, наибольший недостаток планой прокрутки — возможность сбить фокус. Прокрутка до элемента с помощью кода JavaScript работает хорошо, пока фокус передвигается почти туда, куда прокручивается веб-страница.
Автор урока Chris Coyier
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
- Создание дизайна в стиле старых компьютерных терминалов
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- Футуризм в иллюстрации
192