vue2通过scrollIntoView实现页面滚动过渡动画

卫盼1

已于 2023-10-26 20:18:34 修改

阅读量1k

点赞数

文章标签： java 前端服务器

于 2023-10-26 19:55:09 首次发布

本文链接：https://blog.youkuaiyun.com/Yourlittlecutie/article/details/134063539

版权

本文介绍了如何在Vue组件中使用`@scroll`绑定方法，监控`div`元素的滚动事件，通过`scrollChange`函数获取滚动位置并可能执行相应逻辑，如调整positionIndex。

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

页面div 绑定 @scroll="scrollEvent" 方法，

<div class="container_wrap" @scroll="scrollChange" ref="container_wrap">

js 方法

methods：{
     scrollChange() {
      // this.scrollLeft = this.$refs.container_wrap.scrollLeft; // 距左边距离
      // this.scrollTop = this.$refs.container_wrap.scrollTop; // 距上边距离
      // if (this.scrollTop == 0) {
      //   this.positionIndex = 0
      // } else if (this.scrollTop == 200) {
      //   this.positionIndex = 1
      // }
      console.log('页面滚动参数--------------', this.scrollTop);

    },
}

关注博主即可阅读全文