Scroll to the bottom doesn't work due to font link

Question

Can someone please explain what's going on here?

As you can see in the example, the scroll does not go all the way down to the bottom

This is of course a problem as it does not behave according to the instructions, which is:
scrollIntoView() or target.scroll (0, target.scrollHeight - target.clientHeight);

Strangely enough, it has something to do with the "font link" in "<head>", because if I use any font other than the one that has been downloaded (Poppins), it works

var html_1 = '<div class="chat_window"><div class="messages"></div></div>';
var html_2 = '<div>hello buddy</div>';

document.body.insertAdjacentHTML('beforeend', html_1);
var target = document.querySelector('.chat_window').querySelector('.messages');

for(var i = 0; i < 9; i++) {

    target.insertAdjacentHTML('beforeend', html_2);
    //target.scroll(0, target.scrollHeight - target.clientHeight);
    target.lastElementChild.scrollIntoView();

}

body 
{
    font-family: Poppins; /*here, because of this the problem arise*/
}

.chat_window 
{
    height: 113px;
    width: 339px;
    border: 1px solid black;
}

.chat_window .messages 
{
    height: 100%;
    overflow: auto;
}

<head>
    <link href="http://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700" rel="stylesheet">
</head>

<body></body>

try font-family: 'poppins'; so... body { font-family: 'poppins'; } — Paul M, Jul 31 '21 at 20:57
Thanks, but it doesn't work. Grateful for a solution but I also hope someone can explain why it doesn't work — Arre, Jul 31 '21 at 21:28

Tigger · Answer 1 · 2021-07-31T22:05:51.827

The problem is the time needed to dynamically render the HTML and load the font. There are a few options, but might be seen as a little hacky.

Make sure you are using the same font somewhere else on the page. This will cause the browser to load the font (otherwise the browser may ignore the font until it is needed)
Delay the scroll a little after you render the HTML with JavaScript.

A minor change like this could work:

var html_1 = '<div class="chat_window"><div class="messages"></div></div>';
var html_2 = '<div>hello buddy</div>';
    
document.body.insertAdjacentHTML('beforeend', html_1);
var target = document.querySelector('.chat_window').querySelector('.messages');
    
for(var i = 0; i < 9; i++) {
  target.insertAdjacentHTML('beforeend', html_2);
}

// A short delay, then jump to last item.
setTimeout(function(){
    target.scroll(0, target.scrollHeight - target.clientHeight);
    target.lastElementChild.scrollIntoView();
},500);

body{
 font-family: Poppins;
}
.chat_window{
    height: 113px;
    width: 339px;
    border: 1px solid black;
}
.chat_window .messages{
    height: 100%;
    overflow: auto;
}

<head>
    <link href="http://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700" rel="stylesheet">
</head>

<body>(forcing the font to load)</body>

Thanks for your answer, it gave me some new ideas... But if it's one hundred percent true what you say then the following should work, which it doesn't...
hello
... Or maybe onload doesn't wait for the style to be applied? — Arre, Jul 31 '21 at 23:04
`onload` is for the HTML, not the rendering. CSS is different. The `setTimeout()` gives the browser time to render (and download) everything. The slight pause before the scroll is what is required. BTW, if you are pulling the message content from AJAX, then you can do the scroll at the end of the AJAX processing (whcih is a better time to scroll). — Tigger, Jul 31 '21 at 23:26
It is actually happening after a ajax call is returned and ready, but still the font isn't ready when the ajax returns the first time. If I "ajax call" for messages again, it works as expected with the scroll... I also tried font-face which worked immediately without a delay so I'll go with that solution. Thx for your time @Tigger — Arre, Jul 31 '21 at 23:46

Scroll to the bottom doesn't work due to font link

1 Answers1

hello