[Beginner] Strugling with Dom.Scroll

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

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.

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.

1 Like
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.

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

6

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

7

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

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.

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 ?!?

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>