Scrolling Within An Index

[pcbowers]

I am rendering out a large amount of text. I've split it into chapters right now (the text itself comes in sentences, but since the items have to be block based when styling and calculating offsets, it makes more sense to render as chapters). I want the ability to scroll to specific sentences though.

Currently, I scrollToIndex, wait for the onscrollend method to fire, and then, now that the specific sentence element exists since it's within the visible region of the virtualizer, I query the element and scroll to it.

The problem with this is there's a slight flash between scrolling to the chapter and then scrolling back down to the verse. Another problem is that sometimes, the chapter is already visible, so calling scrollToIndex doesn't actually render anything, so I can't rely on onscrollend to fire and trigger it. I guess I could add a callback to where I call scrollToIndex just in case it already exists, but ideally, there would be a way natively to figure out the offset to items within the list. Is there a way to do this?

[pcbowers]

Here's an example using the svelte playground that illustrates the flash to make scrolling within an item necessary:

https://svelte.dev/playground/739fe48421134ba1b6a6ab9c8247f9c9?version=5.1.13

[inokawa]

This seems to work without the opacity and scrollend controll, as far as I tested. scrollToIndex will be completed without repaint, so you can schedule it again with sentence.offsetTop just before paint.

function scrollToChapter(chapterId: number, sentenceId?: string) {
  if (!virtualizer) return;
  virtualizer.scrollToIndex(chapterId - 1);

  if (sentenceId) {
    requestAnimationFrame(() => {
      const sentence = document.getElementById(sentenceId);
      if (!sentence) return;
      virtualizer.scrollToIndex(chapterId - 1, { offset: sentence.offsetTop });
    });
  }
}

There are no good API to wait for scrollToIndex ends for now. I may change scrollToIndex to return promise to wait for it in the future, but I'm not sure it works for every usecases.

[pcbowers]

Brilliant! I would never have thought about this! This is definitely more reliable (time will tell how reliable, but I'm going to use this for now!). The promise to wait for it would be cool, though I do recognize that may be difficult to implement.

Is there an easy way to now tell whether or not we're scrolling because of one of the scroll methods or we're scrolling because of a user scroll? I'm listening to an onscroll event so that I can get the current read position, and don't want it to run if I'm scrolling manually using the scrollToChapter method. Checked the APIs and it looks like the onscroll event only has an offset parameter. Would be cool if it also included a parameter that indicated the source of the scroll (i.e. scrollToIndex or mousewheel or something like that), or even just a boolean for isDirectlyInitializedByUser

[inokawa]

There is no instant way to do this for now. Thank you for the suggestion.