0
235
VistasVue js scrollIntoView solo en el div del elemento
Tengo una página vue con dos divs. El Select-Div tiene una lista de elementos. Si hago clic en un elemento de la lista, Scroll-Div debería desplazarse hasta el elemento de identificación correspondiente en el interior (preferiblemente al centro de ese elemento) que tiene la descripción larga de los detalles del elemento de la lista.
El problema que tengo es que si uso scrollIntoView, toda la página también se desplaza hacia el centro, por lo que Scroll-Div se desplaza hacia su lugar, pero también el desplazamiento de la página principal.
También tenga en cuenta: dentro de Scroll-Div hay un componente recursivo, por lo que solo puedo usar ids y no refs.
Mi función goTo() en la página principal:
goTo(id) { const element = document.getElementById(`Id-${id}`); if (element) { element.scrollIntoView({ block: "center", behavior: "smooth", }); } },Esto obtiene la identificación emitida de Select-Div y selecciona la identificación html correspondiente de Scroll-Div.
1 Respuestas
Responde la pregunta0
Parece que scrollBy es una buena API para esto.
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy
Un ejemplo de código en Vue 2 podría verse así
<template> <div class="select-component"> <div class="container"> <div class="scroll-div" ref="scrollDiv"> <p id="a">A lorem ipsum</p> <p id="b">B lorem ipsum</p> <p id="c">C lorem ipsum</p> </div> <div class="select-div"> <button @click="goto('a')">Goto a</button> <button @click="goto('b')">Goto b</button> <button @click="goto('c')">Goto c</button> </div> </div> </div> </template> <script> export default { methods: { goto(id) { let scrollDiv = this.$refs.scrollDiv; let el = scrollDiv.querySelector(`#${id}`); if (el) { let scrollDivRect = scrollDiv.getBoundingClientRect(); let idRect = el.getBoundingClientRect(); let y = scrollDivRect.y; let y1 = idRect.y; let offset = y1 - y; scrollDiv.scrollBy({ top: offset, behavior: "smooth", }); } }, }, }; </script>Manifestación