I’m currently doing a spike on setting up custom scrolling logic in Elm. The idea is that if you have a large file to display, perhaps a log or a large file in an editor, rendering the full view for it each time, can be slow. The default way of using overflow: scroll on the div works, but is not op…

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.…

[image] hans-helmut: 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 ( Browser.Dom - browser 1.0.2 ). In this scene display the divs containing lines. Now the optimization: Merge all divs with lines before…

Thinking about it, do I even need the big divs before and after the viewport? I was going to use “position: absolute” on each line div anyway. So if I just position the lines correctly within the overall container div, and then scroll that? I’ll give it a go anyway.

[image] Philipp_Krueger: You might want to look up the term “virtual scrolling”. Thanks for that tip. I was searching for “custom scrolling” which only turns up hits for how to customize the look of scroll bars with CSS or other techniques - was thinking it is hard to search for what I am aft…

Thinking about it, do I even need the big divs before and after the viewport? The intention of the big divs is to have a proper sized div around, with a proper sized scrollbar. Of course you can also use a calculated height.

One current package that has the same aim, I think, is https://package.elm-lang.org/packages/FabienHenon/elm-infinite-list-view/latest/

[image] 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. Optim…

We have an infinite sc[quote=“rupert, post:9, topic:6403”] 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. [/quote] If you are writing a text editor I might be worth capturing all keyboar…

[image] francescortiz: If you are writing a text editor I might be worth capturing all keyboard events to have full control of what is going on, specially if it is going to be an advanced text editor. I’m thinking the hidden textarea approach used by CodeMirror will really be necessary - that…

Custom Scroll Bar Logic

Learn

Philipp_Krueger October 16, 2020, 7:42am 5

You might want to look up the term “virtual scrolling”. It might give you some more resources on how others are doing this.

Topic		Replies	Views
Elm 0.18: How to scroll a (non-window) element? Learn	6	1368	October 21, 2018
Elm-ui vertical scrollbar overlapping content Learn	3	820	July 22, 2022
Custom Scrollbar in Elm Learn	8	1968	September 22, 2019
Pure Elm rich text editor Show and Tell	38	5118	May 3, 2021
Elm-ui: can only get my "code blocks" to fill the entire width or go off screen Learn	4	692	September 13, 2021

Custom Scroll Bar Logic

Related topics