在开发聊天页面过程中,当我们点击某个人进行聊天时,会遇到这样的问题,怎么将聊天消息自动滚动到最新一条呢?其实一句话就可以很容易的解决哦!!!
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>