可以结合使用Vue的ref和scrollIntoView()方法来实现文章来源地址https://www.toymoban.com/news/detail-675479.html
<template>
<div>
<button @click="addDiv">添加新的<div>标签</button>
<div ref="container" class="container">
<div v-for="（item,index) in divs" :key="index" ref="divElement" class="div-element">
<!-- 此处为动态添加的div内容 -->
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
divs: []
};
},
methods: {
addDiv() {
this.divs.push({name:'小明'})
this.$nextTick(() => {
const divElement = this.$refs.divElement[this.$refs.divElement.length - 1];
//this.$refs.divElement.length - 1 取的是该数组中的最后一个
if (divElement) {
divElement.scrollIntoView({ behavior: 'smooth', block: 'end' });
}
});
}
}
};
</script>
文章来源：https://www.toymoban.com/news/detail-675479.html
到了这里，关于vue中将新添加的div标签自动定位到可视区域内的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
