vue 滚动到指定位置scrollIntoView

作者：你好赵伟 | 2024-04-17 04:55:40

踩

想要实现点击箭头就往上翻一页的效果

点击箭头页面滑动到红色长方形区域。

解决方法：scrollIntoView

先上页面结构：


 <div class="scroll_down" @click="goScroll"></div> //箭头位置
 <div class="mt20" ref="viewDiv">  //点击箭头后出现的位置
      <div class="greenLine" style="height: 600px;">xxxxxxxxxxxxxxxxxxx</div>
     </div>

点击箭头后要出现在ref="viewDiv"的这个位置，goScroll方法代码为：


 goScroll(){
      this.$refs.viewDiv.scrollIntoView({ behavior: "smooth"})
    },

scrollIntoView具体的使用方法请参照MDN：Element.scrollIntoView() - Web API 接口参考 | MDN (mozilla.org)

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/438307