Actualmente estoy implementando una cuadrícula grande y perezosamente renderizada, con el objetivo de poder mostrar muchas más filas y columnas de las que podría mostrar si las renderizara directamente. Para hacerlo, he implementado una solución donde:
scroller y un div de content . El div de scroller está vacío y el div de content muestra todo lo que se ve en la pantalla.scroller .scroller , el div de content representa diferentes datos para el contenido.content se traduce a sí mismo para que permanezca en la posición correcta.Funcionalmente, esto nos permite renderizar muy pocos divs, mientras que desde la perspectiva de los usuarios, pueden desplazarse por sus datos normalmente. Esto es necesario, dado el tamaño de los datos con los que estoy trabajando.
Sin embargo, necesito poder desplazar la cuadrícula a una ubicación específica (por ejemplo, la fila 100, la columna 3). Para hacerlo, necesito poder mover el div del scroller . Sin embargo, como la mayor parte del div del scroller está oculto (por el contenedor de la cuadrícula), no puedo entender cómo usar las funciones scroll o scrollBy para lograr esto. Como el elemento de scroller está mayormente oculto, la función de scroll no puede moverlo, ya que el scroll solo funciona en relación con el aspecto visible del elemento (¡creo!).
Reduje la cuadrícula al mínimo ejemplo reproducible en el codepen aquí : https://codepen.io/naterush/pen/WNOZGze (era demasiado grande para ser razonable hacer esta pregunta). Esto solo tiene una sola fila de datos, y puede desplazarse hacia la derecha para ver más datos.
El único código que necesita ser terminado es la función scrollTo20 . ¡Cualquier pensamiento, comentario o dirección sería muy apreciado!
El problema es queElement.scroll() está adjunto al elemento incorrecto. Si desea desplazar el div, considere cambiar la función para desplazarse desde el div externo, no en un div dentro de un contenedor.
let currNumber = 0; function onScroll(e) { let { scrollLeft, scrollTop } = e.target; // First, move the content div to the correct place let xOffset = scrollLeft % 200; document.getElementById('content').style.transform = `translate(${scrollLeft - xOffset}px, 0px)` // Then, update the divs inside the content div to have the correct numbers let startingNumber = Math.floor(scrollLeft / 200); if (currNumber != startingNumber) { console.log("Changing to", startingNumber) for (let i = 0; i < 5; i++) { document.getElementById('' + i).innerHTML = startingNumber + i; } } currNumber = startingNumber; } function scrollTo20() { console.log("This should scroll the #scroller so that the div then ends up being displayed starts at 20") document.getElementById('container').scroll(20 * 200, 0); // point to container instead of scroller } document.getElementById('container').addEventListener('scroll', onScroll) * { box-sizing: border-box; } #app { padding: 2rem; height: 400px; width: 1000px; } #container { width: 100%; height: 200px; border: 1px solid black; position: relative; overflow: auto; } #scroller { width: 10000px; height: 100%; } #content { top: 0; left: 0; position: absolute; } .row { display: flex } .row > div { width: 200px; } <div id='app'> <div id='container'> <div id='scroller'/> <div id='content'> <div class='row'> <div id='0'> 0 </div><div id='1'> 1 </div><div id='2'> 2 </div><div id='3'> 3 </div><div id='4'> 4 </div><div id='5'> 5 </div></div></div></div></div><button onclick='scrollTo20()'> Scroll to 20</button>ACTUALIZACIÓN: @testing_22 descubrió la solución. La función Element.scroll se desplaza dentro de un div, no en un div dentro de un contenedor. Solo tenía que cambiar lo que estaba tratando de desplazar.