Привязка прокрутки в мобильном Safari сохраняет положение при изменении dom ⇐ CSS
-
Гость
Привязка прокрутки в мобильном Safari сохраняет положение при изменении dom
У меня проблема, которая возникает только в Safari для мобильных устройств. На мобильном устройстве Chrome все работает как положено.
Я пишу одностраничное приложение. Он состоит из нескольких контейнеров. Одновременно виден только один. Они отображаются и скрываются с помощью функций jQuery show и hide. Контейнеры могут (но не всегда) состоять из секций. Каждый раздел должен занимать весь экран, и пользователь переключается между ними с помощью прокрутки.
В основном код выглядит так:
html { тип прокрутки-привязки: y обязателен; поведение прокрутки: нет; } .раздел { положение: относительное; максимальная ширина: 100vw; максимальная высота: 100vh !важно; прокрутка-привязка-выравнивание: начало; переполнение: скрыто;
Что происходит:
[*]Пользователь прокручивает третий раздел первого раздела. [*]Первый контейнер скрыт, а второй показан. [*]Второй контейнер скрыт, а третий показан.
На этом этапе отображается третий раздел третьего контейнера!
Я предполагаю, что браузер каким-то образом удерживает положение прокрутки. Этого не происходило, пока я не реализовал привязки.
Это может иметь разное значение иногда после отображения контейнера, в котором он находится в начале, а иногда отображается последний раздел.
Я хотел бы иметь контроль над тем, что предоставляется пользователю. Я хотел бы всегда быть первым разделом по умолчанию, но также иметь возможность начинать с определенного раздела, определенного в коде js.
У меня проблема, которая возникает только в Safari для мобильных устройств. На мобильном устройстве Chrome все работает как положено.
Я пишу одностраничное приложение. Он состоит из нескольких контейнеров. Одновременно виден только один. Они отображаются и скрываются с помощью функций jQuery show и hide. Контейнеры могут (но не всегда) состоять из секций. Каждый раздел должен занимать весь экран, и пользователь переключается между ними с помощью прокрутки.
В основном код выглядит так:
html { тип прокрутки-привязки: y обязателен; поведение прокрутки: нет; } .раздел { положение: относительное; максимальная ширина: 100vw; максимальная высота: 100vh !важно; прокрутка-привязка-выравнивание: начало; переполнение: скрыто;
Что происходит:
[*]Пользователь прокручивает третий раздел первого раздела. [*]Первый контейнер скрыт, а второй показан. [*]Второй контейнер скрыт, а третий показан.
На этом этапе отображается третий раздел третьего контейнера!
Я предполагаю, что браузер каким-то образом удерживает положение прокрутки. Этого не происходило, пока я не реализовал привязки.
Это может иметь разное значение иногда после отображения контейнера, в котором он находится в начале, а иногда отображается последний раздел.
Я хотел бы иметь контроль над тем, что предоставляется пользователю. Я хотел бы всегда быть первым разделом по умолчанию, но также иметь возможность начинать с определенного раздела, определенного в коде js.
Мобильная версия