Предотвращение запоминания положения при прокрутке мобильного браузера при изменении вида ⇐ CSS
-
Anonymous
Предотвращение запоминания положения при прокрутке мобильного браузера при изменении вида
Во время разработки веб-приложения я столкнулся со странной проблемой, которую сложно отладить. Эта проблема особенно неприятна с точки зрения взаимодействия с пользователем и возникает исключительно в мобильных браузерах.
Мой веб-сайт состоит из нескольких представлений, каждое из которых содержит несколько «снимков» — полноэкранных разделов, которые пользователи могут прокручивать вверх и вниз, аналогично TikTok или Instagram Reels.
Для реализации этого я использую чистый HTML и CSS:
html { тип прокрутки-привязки: y обязателен; поведение прокрутки: нет; } .раздел { положение: относительное; максимальная ширина: 100vw; максимальная высота: 100vh !важно; прокрутка-привязка-выравнивание: начало; переполнение: скрыто;
Одновременно отображается только одно представление. Я использую Vue.js, поэтому DOM обновляется динамически и присутствует только один элемент .view. Однако я столкнулся с той же проблемой при использовании чистого JavaScript и вызове .show()/.hide() для управления отображением желаемого представления.
Проблема в следующем:
[*]Пользователь прокручивает (с помощью привязок) до определенного раздела текущего просмотреть. [*]Вид меняется. Новое представление может, но не обязательно, содержать разделы привязки. [*]Пользователь попадает в ту же позицию, из которой вышел на шаге 1. Таким образом, если он был в третьем разделе, а в новом представлении также есть разделы, страница будет расположена в третьем.
Такое поведение происходит, даже если существует представление без прокрутки между ними. Например, пользователь находится в представлении 1, разделе 3, переходит к представлению 2 без разделов, затем переходит к представлению 3 с разделами и снова попадает в раздел 3.
Еще один интересный фактор: если в новом представлении меньше разделов, чем количество разделов, в которых пользователь находился в прошлый раз, они начнутся сверху.
Я думаю, что это желательное поведение, призванное обеспечить единообразный пользовательский интерфейс для навигации по веб-сайту.
Однако мне нужно решение, которое начиналось бы сверху для каждого нового представления, отображаемого пользователю.
Я был бы очень признателен за любую помощь в поиске решения этой проблемы.
Во время разработки веб-приложения я столкнулся со странной проблемой, которую сложно отладить. Эта проблема особенно неприятна с точки зрения взаимодействия с пользователем и возникает исключительно в мобильных браузерах.
Мой веб-сайт состоит из нескольких представлений, каждое из которых содержит несколько «снимков» — полноэкранных разделов, которые пользователи могут прокручивать вверх и вниз, аналогично TikTok или Instagram Reels.
Для реализации этого я использую чистый HTML и CSS:
html { тип прокрутки-привязки: y обязателен; поведение прокрутки: нет; } .раздел { положение: относительное; максимальная ширина: 100vw; максимальная высота: 100vh !важно; прокрутка-привязка-выравнивание: начало; переполнение: скрыто;
Одновременно отображается только одно представление. Я использую Vue.js, поэтому DOM обновляется динамически и присутствует только один элемент .view. Однако я столкнулся с той же проблемой при использовании чистого JavaScript и вызове .show()/.hide() для управления отображением желаемого представления.
Проблема в следующем:
[*]Пользователь прокручивает (с помощью привязок) до определенного раздела текущего просмотреть. [*]Вид меняется. Новое представление может, но не обязательно, содержать разделы привязки. [*]Пользователь попадает в ту же позицию, из которой вышел на шаге 1. Таким образом, если он был в третьем разделе, а в новом представлении также есть разделы, страница будет расположена в третьем.
Такое поведение происходит, даже если существует представление без прокрутки между ними. Например, пользователь находится в представлении 1, разделе 3, переходит к представлению 2 без разделов, затем переходит к представлению 3 с разделами и снова попадает в раздел 3.
Еще один интересный фактор: если в новом представлении меньше разделов, чем количество разделов, в которых пользователь находился в прошлый раз, они начнутся сверху.
Я думаю, что это желательное поведение, призванное обеспечить единообразный пользовательский интерфейс для навигации по веб-сайту.
Однако мне нужно решение, которое начиналось бы сверху для каждого нового представления, отображаемого пользователю.
Я был бы очень признателен за любую помощь в поиске решения этой проблемы.
