Estoy diseñando una página de desplazamiento simple. Se divide en una serie de div (o secciones). Al presionar la tecla de flecha hacia abajo o hacia arriba, debe desplazarse a la vista a la sección siguiente o anterior.

El siguiente código parece funcionar si presiono la tecla hacia abajo o hacia arriba una vez por segundo, pero si sigo presionando la tecla, pasa a la siguiente sección, pero se queda atascado en el medio. Es gracioso, porque si cambio el parámetro scrollintoview a {behavior: "auto"}, no hay tal problema.

¿Hay alguna manera de arreglar esto?

 moveToSection(sectionID, sectionY) { document .getElementById(sectionID) .scrollIntoView({ block: "start", behavior: "smooth" }); this.setState({ lastScrollTop: sectionY }); } checkDownCondition() { if (this.state.keyDown) { console.log("key is pressed - returning"); return; } this.setKeyDown(); document.removeEventListener("keydown", this.handleKeyDown); var currentPos = this.state.lastScrollTop; const sectionTwoY = this.state.sectionTwoY; const sectionThreeY = this.state.sectionThreeY; const sectionFourY = this.state.sectionFourY; const sectionFiveY = this.state.sectionFiveY; if (this.state.keyDown) { setTimeout(() => { // scrolling from section1 to section2 if (currentPos < sectionTwoY) { this.moveToSection("section2", sectionTwoY); // scrolling from section2 to section3 } else if (currentPos >= sectionTwoY && currentPos < sectionThreeY) { this.moveToSection("section3", sectionThreeY); // scrolling from section3 to section4 } else if (currentPos >= sectionThreeY && currentPos < sectionFourY) { this.moveToSection("section4", sectionFourY); // scrolling from section4 to section5 } else if (currentPos >= sectionFourY && currentPos < sectionFiveY) { this.moveToSection("section5", sectionFiveY); } }, 1); setTimeout(() => { this.setKeyUp(); document.addEventListener("keydown", this.handleKeyDown); }, 1000); } }