search

PolymerElements / paper-dialog-scrollable

A scrollable area used in a Material Design dialog
15 stars 18 forks source link

Automatic scroll to bottom on content addition / append #52

Closed turbodonkey closed 8 years ago

turbodonkey commented 8 years ago

I might be doing this wrong, but right now there doesn't appear to be a way to auto scroll to the bottom of the 'scrollable' div upon append'ing new content. For chat programs for example this is table stakes.

Suspect I'm probably using the wrong module or doing something wrong. A search online would suggest that you can do this:

.$.scrollable.scrollTop = .$.scrollable.scrollHeight But this doesn't work for me, there is evidence that .scrollTop is indeed changing, but not to the value of scrollHeight. More interestingly, if I do this manually in the dev tools console, it works!?
valdrinkoshi commented 8 years ago

Hi @turbodonkey, I believe that happens because the child is not added yet to the dom (polymer will do it not synchronously for perf reasons). You can either force polymer to perform pending actions with Polymer.dom.flush() or wait a tick before updating the scrollTop (e.g. with an async(callback, 1). Here a working example with the flush http://jsbin.com/qejuqij/3/edit?html,output Hope this helps!

turbodonkey commented 8 years ago

Thank you sir, two things I should have done, 1) probably used stackoverflow for this, my bad. 2) read the docs. I didn't use the same solution you suggested but you 90% got me on the async war path where the problem lay.

I found the clue here in dom-repeat template docs, specifically saying that a .render() needs to be called if you have code which depends on the state.

https://www.polymer-project.org/1.0/docs/api/dom-repeat

Thank you again kind sir!

On Wed, Jul 13, 2016 at 4:25 AM, Valdrin Koshi notifications@github.com wrote:

Hi @turbodonkey https://github.com/turbodonkey, I believe that happens because the child is not added yet to the dom (polymer will do it not synchronously for perf reasons). You can either force polymer to perform pending actions with Polymer.dom.flush() or wait a tick before updating the scrollTop (e.g. with an async(callback, 1). Here a working example with the flush http://jsbin.com/qejuqij/3/edit?html,output Hope this helps!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/PolymerElements/paper-dialog-scrollable/issues/52#issuecomment-232135656, or mute the thread https://github.com/notifications/unsubscribe/AF5_z7n7Y6nfNH5h1SLGo7mU-f-WUyrZks5qU9wqgaJpZM4JKCSb .

valdrinkoshi commented 8 years ago

glad it helped! Closing the issue ;)