Школа
Веб-разработка

Возможно ли делать сайты, где человек остаётся на том месте, где читал

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

Хотела бы узнать, возможно ли делать сайты, где человек остаётся на том месте, где читал? От чего это зависит?

Олеся Князева
12 мая 2022
👁 3414  
Веб-разработка

Возможно ли делать сайты, где человек остаётся на том месте, где читал

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

Хотела бы узнать, возможно ли делать сайты, где человек остаётся на том месте, где читал? От чего это зависит?

Олеся Князева
12 мая 2022
👁 3414  
Василий Половнёв
Технический директор бюро
Полезно
 11
11
Непонятно
 1
1
Войдите в Бюросферу, чтобы голосовать

Олеся!

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

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

На всех размерах окна (1440, 1000 и 500 пикселей) браузер сохраняет положение заголовка относительно верхнего края

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

Браузер теряет позицию, потому что перед ним фактически другая страница: изменились кегли, набор и размеры элементов страницы

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

В наших книгах мы запоминаем текущий разворот и его относительное смещение от верхнего края окна в процентах от высоты разворота. Скажем, если я остановился на середине 15 разворота, то мы сохраняем пару (15 50%). Если я остановился в 50 пикселях от начала 10 разворота, то сохраняем пару (10 -5%) (при условии, что разворот имеет высоту в 1000 пикселей).

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

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 11
11
Непонятно
 1
1
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы