Предотвращение запоминания положения при прокрутке мобильного браузера при изменении видаCSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Предотвращение запоминания положения при прокрутке мобильного браузера при изменении вида

Сообщение Anonymous »


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

Мой веб-сайт состоит из нескольких представлений, каждое из которых содержит несколько «снимков» — полноэкранных разделов, которые пользователи могут прокручивать вверх и вниз, аналогично TikTok или Instagram Reels.

Для реализации этого я использую чистый HTML и CSS:

html { тип прокрутки-привязки: y обязателен; поведение прокрутки: нет; } .раздел { положение: относительное; максимальная ширина: 100vw; максимальная высота: 100vh !важно; прокрутка-привязка-выравнивание: начало; переполнение: скрыто;

Одновременно отображается только одно представление. Я использую Vue.js, поэтому DOM обновляется динамически и присутствует только один элемент .view. Однако я столкнулся с той же проблемой при использовании чистого JavaScript и вызове .show()/.hide() для управления отображением желаемого представления.

Проблема в следующем:
[*]Пользователь прокручивает (с помощью привязок) до определенного раздела текущего просмотреть. [*]Вид меняется. Новое представление может, но не обязательно, содержать разделы привязки. [*]Пользователь попадает в ту же позицию, из которой вышел на шаге 1. Таким образом, если он был в третьем разделе, а в новом представлении также есть разделы, страница будет расположена в третьем.
Такое поведение происходит, даже если существует представление без прокрутки между ними. Например, пользователь находится в представлении 1, разделе 3, переходит к представлению 2 без разделов, затем переходит к представлению 3 с разделами и снова попадает в раздел 3.

Еще один интересный фактор: если в новом представлении меньше разделов, чем количество разделов, в которых пользователь находился в прошлый раз, они начнутся сверху.

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

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

Я был бы очень признателен за любую помощь в поиске решения этой проблемы.
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение
  • Реагируйте родную высоту вида и высоту DIV внутри веб -вида
    Anonymous » » в форуме Android
    0 Ответы
    5 Просмотры
    Последнее сообщение Anonymous
  • Реагируйте родную высоту вида и высоту DIV внутри веб -вида
    Anonymous » » в форуме IOS
    0 Ответы
    5 Просмотры
    Последнее сообщение Anonymous
  • Реагируйте родную высоту вида и высоту DIV внутри веб -вида
    Anonymous » » в форуме Javascript
    0 Ответы
    4 Просмотры
    Последнее сообщение Anonymous
  • Реагируйте родную высоту вида и высоту DIV внутри веб -вида
    Anonymous » » в форуме Android
    0 Ответы
    2 Просмотры
    Последнее сообщение Anonymous
  • Веб -сайт неправильно масштабируется при изменении размера браузера и мобильного телефона
    Anonymous » » в форуме Html
    0 Ответы
    21 Просмотры
    Последнее сообщение Anonymous

Вернуться в «CSS»