Custom Scroll Bar Logic

I had done a similar thing, scrolling a list with 100000 entries. It works, as long the displayed lines or entries have the same height. I used an idea, I found somewhere on github, implemented in jquery, but I can not find the original source anymore.

It works like that:

Each text-line is a div. Calculate, how may pixel this div needs vertical, e.g. by drawing a test-div.
Create a scrollable div, the scene (https://package.elm-lang.org/packages/elm/browser/latest/Browser.Dom). In this scene display the divs containing lines.

Now the optimization:
Merge all divs with lines before the viewport to one big div, without any content.
Similar merge for all divs after the viewport.

So only the viewable divs with lines are rendered.

For better user-experience with small scrolls add some divs with content before and after the viewport (and decrease the big divs properly)