由于字体链接，滚动到底部不起作用

谁能解释一下这是怎么回事?

在示例中可以看到，滚动条并没有一直滚动到底部

这当然是一个问题，因为它不按照指令行事，这是:
scrollIntoView()或目标。滚动(0)，目标。

奇怪的是，它与"字体链接"在">

"中，因为如果我使用已下载的字体(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>

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

确保你在页面的其他地方使用相同的字体。这将导致浏览器加载字体(否则浏览器可能会忽略字体，直到需要它)
在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>

相关内容

最新更新

热门标签：