Lazy-loading grid: scroll a large, empty div that is mostly hidden by overflow: auto

Question

I am currently implementing a large, lazily rendered grid, with the goal of being able to display many more rows and columns than you could if you just rendered them directly. To do so, I've implemented a solution where:

The grid is a container div that holds a scroller and content div. The scroller div is empty, and the content div displays whatever is visible on the screen.
The user scrolls in the container by scrolling the scroller.
Based on where the scroller div is, the content div renders different data for the content.
The content div translates itself around so that it stays positioned correctly.

Functionally, this allows us to render very few divs, while from the users perspective, they can scroll through their data as normal. This is necessary, given the data sizes I'm working with.

However, I need to be able to scroll the grid to a specific location (e.g. the 100th row, 3rd column). To do so, I need to be able to move the scroller div. However, as most of scroller div is hidden (by the grid container), I cannot figure out how to use the scroll or scrollBy functions to accomplish this. As the scroller element is mostly hidden, the scroll function cannot move it, as scroll only works in relation to the visible aspect of the element (I think!).

I striped down the grid to the minimal reproducible example in the codepen here: https://codepen.io/naterush/pen/WNOZGze (it was too big to be reasonable to put in this question). This just has a single row of data, and you can scroll to the right inside of it to see more data.

The only code that needs to be finished is the scrollTo20 function. Any thoughts or comments or directions would be greatly appreciated!

user_12096922 · Answer

The problem is that Element.scroll() is attached to the wrong element. If you want to scroll the div, consider changing the function to scroll from the outer div, not on a div within a container.

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;
}

user_13113837 · Answer

UPDATE: @testing_22 figured out the solution. The Element.scroll function scrolls within a div, not on a div within a container. I just had to change what I was trying to scroll.

Lazy-loading grid: scroll a large, empty div that is mostly hidden by overflow: auto

2 Answers