Блог

В настоящее время я внедряю большую, лениво отображаемую сетку с целью отображения большего количества строк и столбцов, чем вы могли бы, если бы просто отображали их напрямую. Для этого я реализовал решение, в котором:

1. Сетка представляет собой контейнер div, который содержит a scroller и content div. scroller Div пуст, и content div отображает все, что видно на экране.
2. Пользователь прокручивает содержимое контейнера, прокручивая scroller .
3. В зависимости от того, где scroller находится div, content div отображает разные данные для содержимого.
4. content Div перемещается так, чтобы оставаться в правильном положении.

Функционально это позволяет нам отображать очень мало divs, в то время как с точки зрения пользователей они могут прокручивать свои данные в обычном режиме. Это необходимо, учитывая размеры данных, с которыми я работаю.

Однако мне нужно иметь возможность прокручивать сетку в определенном месте (например, в 100-й строке, 3-м столбце). Для этого мне нужно иметь возможность перемещать scroller div. Однако, поскольку большая часть div скроллера скрыта (контейнером сетки), я не могу понять, как использовать функции scroll или scrollBy для этого. Поскольку scroller элемент в основном скрыт, scroll функция не может перемещать его, так как scroll работает только по отношению к видимому аспекту элемента (я думаю!).

Я сократил сетку до минимального воспроизводимого примера в коде здесь: https://codepen.io/naterush/pen/WNOZGze (он был слишком велик, чтобы было разумно ставить этот вопрос). Это просто одна строка данных, и вы можете прокрутить ее вправо, чтобы увидеть больше данных.

Единственный код, который необходимо завершить, — это scrollTo20 функция. Любые мысли, комментарии или указания будут высоко оценены!

Проблема в том, что Element.scroll() прикреплен не к тому элементу. Если вы хотите прокрутить div, подумайте о том, чтобы изменить функцию на прокрутку с внешнего div, а не с div внутри контейнера.

 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> 

ОБНОВЛЕНИЕ: @testing_22 нашел решение. Element.scroll Функция прокручивается в div, а не в div внутри контейнера. Мне просто нужно было изменить то, что я пытался прокрутить.