osousa
February 12, 2021, 2:10am
1
I am importing an array of messages from a DB.
When i do messages.addMessage(array)
it inserts the messages, but it doesn’t scroll to the bottom.
If i add messages through the messagebar it does scroll down automatically.
There is no event listener to deal with changes to DOM elements, i think. Should i use MutationObserver and detect changes to the '.messages'
div?
I tried to add the following AFTER the addMessage():
app.views.current.$el.find('.page-content').scrollTop(2000);
But it doesn’t work, maybe the addMessage is asynchronous and when it tries to scroll there is nothing on the page yet.
addMessage
/addMessages
is fully synchronous operation, so any code you write after you call it will be executed after messages added to DOM
osousa
February 12, 2021, 6:02pm
3
Maybe between the execution of the next line of code happens while the DOM is being changed or changes being committed?
If i use the ugly setTimeout solution it works:
app.request.get(app.data.api+'/api/guest/messages/',
{},
(msgs) => {
JSON.parse(msgs).messages.map(m => msg.addMessage({ 'text':m.message,
'name':lmda(m.msgfrom, m.guest.name, 'host'),
'type':type[m.msgfrom]
}));
setTimeout(() => {
console.log('now scrolling');
app.views.current.$el.find('.page-content').scrollTop(2000);
}, 100);
},
(xhr) => {},
);
And 100 milliseconds is enough on Brave Brower, but using chrome i need to set it at least to 200ms, otherwise it doesn’t work… Very weird.
osousa
February 21, 2021, 3:08pm
4
I need to leave the solution to this issue, even if it’s proof of my own dumbness: messages.addMessage(array)
obviously should be messages.addMessages(array)