0

有人可以解释一下这里发生了什么吗？

正如您在示例中看到的那样，滚动不会一直向下到底部

这当然是一个问题，因为它不按照说明操作，即：
scrollIntoView() 或 target.scroll (0, target.scrollHeight - target.clientHeight);

奇怪的是，它与“<head>”中的“字体链接”有关，因为如果我使用已下载字体（Poppins）以外的任何字体，它就可以工作

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>

4

1 回答 1

1

问题是动态呈现 HTML 和加载字体所需的时间。有几个选项，但可能被视为有点 hacky。

  • 确保您在页面的其他位置使用相同的字体。这将导致浏览器加载字体（否则浏览器可能会忽略字体，直到需要它）

  • 使用 JavaScript 渲染 HTML 后稍微延迟滚动。

像这样的小改动可能会起作用：

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>

于 2021-07-31T22:00:11.650 回答