vue双层for循环,点击孙子元素，滚动到页面可视区域，并设置平滑效果动画

HuiRonmantic

已于 2024-05-22 10:07:18 修改

阅读量143

点赞数

CC 4.0 BY-SA版权

分类专栏：大前端文章标签： vue.js javascript 前端

于 2023-01-06 10:58:44 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41346436/article/details/128574847

大前端专栏收录该内容

36 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Vue项目中，如何在双层for循环的场景下，实现点击孙子元素使得该元素平滑滚动到页面的可视区域。通过使用scrollIntoView()方法，结合Vue实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用scrollIntoView( ) 方法，vue双层for循环,点击孙子元素，滚动到页面可视区域，并设置平滑效果动画

效果

![在这里插入图片描述](https://img-blog.csdnimg.cn/f3b1107f987345cbb2920b373a67dc9b.png

代码：

左侧DOM部分

<div class="questionBox">
	  <div v-for="(itemA, indexA) in parentList" :key="indexA">
		<div v-for="(itemB, indexB) in itemA.childrenList" :key="indexB">
		  <div :id="`scorllView${index}${index1}`" class="boxFlex">
			<div class="container">
			 内容
			</div>
		  </div>
		</div>
	  </div>
	</div>

右侧操作按钮部分