当前位置: 首页 > Web前端 > JavaScript

实现添加元素平滑滚动的效果

时间:2023-03-27 12:30:03 JavaScript

背景:如图,点击添加过程时,如果不添加滚动到中间的效果,只是添加新的元素,而你需要手动滚动才能看到整个事情。体验不是特别好。解决方案一不废话,直接看滚动查看Api介绍scrollIntoView因为我的是横向滚动,所以实现的关键代码如下:this.$refs.targetElment[toIndex].scrollIntoView({behavior:'smooth',//smoothScrollinline:'center',//水平滚动到view的中心位置})当然我在使用scrollIntoView的时候也遇到了容器元素偏移的现象。找了一圈也没能解决。还有一个更好的方案(方案2),但是我把无关元素隐藏在外层,比如定位的和多余的flex元素,保证scrollIntoView的容器是干净的,不会出现偏移现象。我猜是因为在执行scrollIntoView的时候,同级元素被拉过来了。方案二这个方案的滚动效果也很流畅,但是需要自己计算目标位置才能滚动this.$refs.targetElment.scroll({left:0,behavior:'smooth'})最后的效果