Quiero mantener la posición de desplazamiento en la barra lateral, pero no puedo averiguar cuál es el error. ¿Qué hice mal en el script JS?
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(".sidebar"); sidebar.scroll(0, localStorage.getItem('scrollPosition')|0); sidebar.scroll(function () { localStorage.setItem('scrollPosition', sidebar.scrollTop) });});Element#scroll no toma una función como argumento, por lo que nunca guarda la nueva posición en ninguna parte.
Lo que quieres hacer en su lugar es escuchar el evento de desplazamiento:
sidebar.addEventListener('scroll', function() { console.log(sidebar.scrollTop); });Otra cosa:
Element#querySelectorAll tampoco toma una función como argumento; asi que
document.querySelectorAll(".sidebarA", function() { /* Stuff */ });no ejecutará la función que puso allí como devolución de llamada. Si el objetivo es ejecutar el código dentro de esa función después de que se haya cargado la página, puede usar el evento de carga:
window.addEventListener('load', function() { var sidebar // and so on... });aquí hay algunos cambios en su código js, asegúrese de que la clase sidebarUl debe verse como
.sidebarUl { overflow-y: scroll; height: 100vh; width: 100px; } y el elemento padre tiene css prop overflow:hidden
const element = document.getElementsByClassName('sidebarUl')[0] console.log('element', element) element.addEventListener("scroll", function(e) { console.log('e', e.target.scrollTop); localStorage.setItem('scrollPosition', e.target.scrollTop) }); window.onload = function() { const element = document.getElementsByClassName('sidebarUl')[0] var reloading = sessionStorage.getItem("scrollPosition"); if (reloading != 0) { element.scroll(0, localStorage.getItem('scrollPosition')|0); } }