Add ability to scroll to index with offset

[jpzwarte]

Screen.Recording.2022-05-23.at.09.11.34.mov

As you can see in the video, when scrolling up or down, once the list item reaches the start/end of the overflow area, the top/bottom box-shadow is cut off. The box-shadow is used to indicate the focused list item (fake focus indication in this case, since the input field at the top always has focus when using the keyboard).

The code to get this behaviour looks like this:

scrollToItem(index: number, position: 'start' | 'center' | 'end' | 'nearest' = 'nearest'): void {
  const scroller = this.renderRoot.querySelector('.items') as LitVirtualizer,
    { bottom, top } = scroller.getBoundingClientRect(),
    item = this.getItemAtIndex(index),
    { bottom: itemBottom = 0, top: itemTop = 0 } = item?.getBoundingClientRect() || {};

  if (!item) {
    // Item can't be found in the DOM, likely because it's not there yet
    scroller.scrollToIndex(index, position);
  } else if (itemBottom >= bottom) {
    // Item is below the bottom of the list
    scroller.scrollToIndex(index, 'end');
  } else if (itemTop <= top) {
    // Item is above the top of the list
    scroller.scrollToIndex(index, 'start');
  }
}

Perhaps similar to scrollIntoView, support the second parameter being an object? https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

scroller.scrollToIndex(index, { position: 'end', offset: 4 }); ?

[jpzwarte]

The code is live here: https://dna.iddinkgroup.com/?path=/story/utilities-list-box-examples--virtual-list

Click a list item and then use arrows up/down keys to scroll.