Custom Scroll Bar Logic

[rupert]

@rupert

• Calculating the size of the div to scroll, so scroll bars can be appropriately sized.
• Implementing the slice, and positioning the lines to be displayed.
• Mouse wheel, page up, page down, ctrl+home, ctrl+end and so on.
• Listening for resize events and re-doing the size calcs.
• Optimization so the scrolling is as smooth as I can get it, and update/view cycle is quick enough to support an editor on large files.

So I’ve done all that and updated the demo, seems to work pretty nicely:

https://mystifying-gates-6761c1.netlify.app/

I made use of Html.Lazy and Html.Keyed and I could see that made a small but barely discernable difference in performance.

The only other thing I would like to do is to override the arrow key and page up/down events, so that they always scroll by an exact integer number of lines. When going down, the last visible line of text should appear whole at the bottom, when going up the first visible line should appear whole at the top.

Plan is to use this for a code editor along these lines: Text editor done in pure Elm.