Сохранение позиции прокрутки при обновлении / возврате с помощью параллакса CSS - PullRequest
Новая
       8

Сохранение позиции прокрутки при обновлении / возврате с помощью параллакса CSS

0 голосов
/ 14 декабря 2018

При создании эффекта параллакса CSS я использовал CSS следующим образом: 

#wrapper {
  perspective: 1px;
  transform-style: preserve-3d;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
}

.parallax-container {
  position: relative;
  transform: translateZ(-1px) scale(2);
  z-index: -1;
}

Это прекрасно работает, и я очень доволен этим эффектом.Однако один непреднамеренный побочный эффект элемента-оболочки full-viewport заключается в том, что обычное поведение браузера при переходе назад или к предыдущей позиции при обновлении или при нажатии кнопки возврата больше не работает.Что касается браузера, то он вообще не прокручивается, так как вся прокрутка выполняется на overflow-y оболочки.

Могу ли я что-нибудь сделать, чтобы это исправить, или это ограничение этой техники?

1 Ответ

0 голосов
/ 14 декабря 2018

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

window.addEventListener("unload", function(e) {
    var wrapper = document.getElementById("wrapper");
    var previousScroll = wrapper.scrollTop;
    window.localStorage.setItem("previousScroll",previousScroll)
}
document.addEventListener("DOMContentLoaded", function(e) {
   var wrapper = document.getElementById("wrapper");
   var previousScroll = window.localStorage.getItem("previousScroll")
    wrapper.scrollTop = previousScroll;
});
...