Сохранить положение прокрутки в sideBar при обновлении и переходе на другие страницы

Вопрос-ответ JavaScript
1

HTML:

<div class="sidebar">
    <div class="sidebarHeader">
        <h4 class="courseHeader"></h4>
    </div>
    <div class="sidebarMain">
        <ul class="sidebarUl">
            <li class="sidebarLi">
                <a class = "sidebarA" href="1.2.html">1.2</a>
            </li>
            <li class="sidebarLi">
                <a class = "sidebarA" href="2.1.html">2.1</a>
            </li>
        </ul>
    </div>
</div>

JS:

document.querySelectorAll(".sidebarA", function() {
var sidebar = document.querySelector(".sidebarMain");

sidebar.scroll(0, localStorage.getItem('scrollPosition')|0);

sidebar.scroll(function () {
       localStorage.setItem('scrollPosition', window.scrollTop)
});});
2

В чем вопрос?

Я вижу в коде кучу чего не так. Начиная от использования querySelectorAll с коллбеком, заканчивая метода scroll для установки степени прокрутки. Я напишу свои мысли по поводу ситуации, может поможет. Если будет уточняющий вопрос или пример кода который должен работать но не работает, смогу уточнить.

  1. Идея считывать уровень прокрутки и записывать его в localStorage корректная и валидная.
  2. В ситуации есть куча граничных случаев. Например если пользователь проскроллил на X, ушел с сайта, изменил размер окна браузера, то прокручивание элемента на X уже не будет соответствовать тому же состоянию. В зависимости от твоей ситуации (кто ставит задачи и какие у них ожидания) возможно стоит донести ограничения реалиазации.
  3. Прокрученность элемента это свойство самого элемента а не window. Иными словами прокрученность нужно мерять не на window, а на самом элементе. Посмотри вот это апи для своего случая: Element.scrollTop - Web APIs | MDN. Если у тебя есть библиотеки типа jquery, то в них есть более удобные апи. Смотри по ситуации.
  4. Для восстановления уровня прокрутки посмотри на это апи: Element.scrollTo() - Web APIs | MDN.
  5. Чтобы выполнить код для каждого элемента из результата querySelectorAll нужно ипользовать цикл. Или через деструктивное присваивание превратить результат querySelectorAll в массив и использовать методы массива. Выглядит вот так:
const elementsAsArr = [...querySelectorAll('.element')]
elementsAsArr.forEach((el) => {
	console.log('el', el)
})