[Beginner] Strugling with Dom.Scroll

Damjan_Georgievski 2018-02-17 19:11:09 UTC #1

I’ve written an irclog viewer that dynamically updates when new messages appear (they are storred in CouchDB, and the elm frontend polls its _changes feed).

I’d like to keep the scroll at bottom and was reading http://package.elm-lang.org/packages/elm-lang/dom/1.1.1/Dom-Scroll - which implies is the package I should use, but I can’t understand how to make use of it.

The web page is simple enough, some

s a and I only want the page itself to be scrolled to bottom.

ps.
the next feature would be to only enable auto-scroll when the user was already near the bottom - but that for later.

Brian_Carroll 2018-02-17 22:23:07 UTC #2

Looks like the relevant functions return a Task. Is that what you’re having difficulty with? You don’t say in the question but that’s a tricky aspect of Elm if for a lot of people so I’m assuming.
Tasks are a bit like Promises in JS. They allow you to do effects asynchronously. But a key difference is that they don’t execute as soon as you create them. You compose the Tasks and chain them together, then you want to actually run the effect, you turn the Tasks into a Cmd using Task.perform or Task.attempt.
http://package.elm-lang.org/packages/elm-lang/core/4.0.0/Task
You need to take the returned Task and ‘attempt’ it. And you’ll need to handle the case where the target ID is not found.

Brian_Carroll 2018-02-17 22:29:26 UTC #3

I tried to create an example but I haven’t got it fully working. But it’s getting late so I’m just posting anyway, maybe it will guide you in the right direction!
https://ellie-app.com/dDyjHK44La1/0
It returns a success value but doesn’t actually scroll.

Damjan_Georgievski 2018-02-17 23:58:30 UTC #4

Thanks for the example.

I though one should use Dom.Scroll.toBottom but even that doesn’t scroll.

Also, wrt the documentation, it is not clear what should scroll where.

pateh 2018-02-18 01:55:19 UTC #5

You have to provide the ID of the element that you want to scroll. If the scrolling element is the body itself, you need an ID on the body so that you can target it.

I totally missed that Brian had added an example, so I created a fresh one https://ellie-app.com/jcXK6jHjMa1/0

Edit: Whoops, fixed link

Damjan_Georgievski 2018-02-18 19:44:50 UTC #6

hmm, so… I have to have an artificially limited (in height) element with ("overflow-y", "scroll" ) and only scroll inside of it?

Damjan_Georgievski 2018-02-18 20:12:58 UTC #7

ps.
I see that previously I’ve used window.scroll(window.scrollX, document.body.clientHeight);

hpate 2018-02-20 17:42:04 UTC #8

It doesn’t need to be artificially limited in height, I used that so it would have a scrollbar rather than expanding in height. It requires an ID on the element you want to scroll, and a scroll bar, in that example I used a scrollable div so that it would fit on one screen.

If you put an ID on the body tag you can scroll that.

Damjan_Georgievski 2018-03-04 23:37:38 UTC #9

so far, I’ve found out that the <!DOCTYPE html> declaration in the html, makes the node.scrollTop = node.scrollHeight; that Elm uses inoperable ?!?

Damjan_Georgievski 2018-03-08 20:11:17 UTC #10

ok, that was for node being <body> I’ve set the id="scrollme" on the <html> element and now scrolling works even with <!DOCTYPE html>