在開發(fā)聊天頁面過程中,當(dāng)我們點(diǎn)擊某個人進(jìn)行聊天時,會遇到這樣的問題,怎么將聊天消息自動滾動到最新一條呢?其實(shí)一句話就可以很容易的解決哦!??!
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,target-densitydpi=medium-dpi,initial-scale=1, maximum-scale=1">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="container">
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa2<br />
aaaa22<br />
aaaa22<br />
aaaa22<br />
aaaa22<br />
</div>
</body>
</html>
js
<script type="text/javascript">
var vm = new Vue({
el: '#container',
created: function() {
Vue.nextTick(function() {
setTimeout(function() {
document.scrollingElement.scrollTop = document.scrollingElement.scrollHeight;
}, 150);
});
}
})
</script>