vue Dialog对话框滚动条自动定位到顶部或者底部

最新推荐文章于 2025-05-13 18:53:23 发布

原创最新推荐文章于 2025-05-13 18:53:23 发布 · 8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue #bug

本文介绍了一种在对话框打开时，通过在Vue.js的updated生命周期钩子中添加代码来自动将滚动条定位到顶部或底部的方法。此外，还提供了一个关于如何为带有滚动条的div元素设置ID及实现点击取消按钮使对话框定位到顶部的解决方案。

需要实现的效果是，在打开的时候，让对话框的滚动条自动定位到顶部

在这里插入图片描述

解决：写在生命周期updated里面可以完美定位！

updated(){
    // 对话框定位到顶部
        let ele = document.getElementById('chatRecord');
        ele.scrollTop = 0;
        
	// 对话框定位到底部
        let ele = document.getElementById('chatRecord');
        ele.scrollTop = ele.scrollHeight;
    },

给带有滚动条的div一个id
在这里插入图片描述