Как сохранить положение прокрутки в блоке при изменении страницы или перезагрузке?

Как можно сохранить и восстановить позицию скролла в блоке при перезагрузке страницы или смене контента с помощью чистого JavaScript для случая, когда контент разделен на левую (навигация) и правую (контент) части, где левая часть имеет высоту 100vh и использует скролл?
  • 26 июня 2024 г. 16:31
Ответы на вопрос 2
Для сохранения положения прокрутки в блоке при изменении страницы или перезагрузке, можно использовать localStorage для хранения информации о текущем положении скролла.

Вот пример кода на JavaScript:

```javascript
// Получаем элементы блока с контентом и блока со скроллом
const contentBlock = document.querySelector('.content');
const scrollBlock = document.querySelector('.scroll');

// Получаем значение скролла из localStorage
const scrollPosition = localStorage.getItem('scrollPosition');

// Если значение скролла существует, устанавливаем его на блок со скроллом
if (scrollPosition) {
  scrollBlock.scrollTop = scrollPosition;
}

// Сохраняем текущее положение скролла в localStorage при прокрутке
scrollBlock.addEventListener('scroll', function() {
  localStorage.setItem('scrollPosition', scrollBlock.scrollTop);
});

// Функция для восстановления положения скролла после перезагрузки страницы
function restoreScrollPosition() {
  const scrollPosition = localStorage.getItem('scrollPosition');
  if (scrollPosition) {
    scrollBlock.scrollTop = scrollPosition;
  }
}

// Вызываем функцию восстановления положения скролла при загрузке страницы
document.addEventListener('DOMContentLoaded', restoreScrollPosition);
```

В данном примере мы сохраняем текущее положение скролла в localStorage при прокрутке и восстанавливаем его при перезагрузке страницы. Можно адаптировать этот код для вашего конкретного случая, поменяв классы элементов или условия сохранения/восстановления положения скролла.
ProjectSoft historydev 
Правильный ответ
Похожие вопросы