前端 滚动到目标元素位置 VUE 版本

请叫我海龟先生 等级 161 0 0

1、前言

想起之前一次在写一个小程序商城时候,详情页的类似锚点的跳转花了我不少时间,因为刚写,对小程序滚动,滚动距离那套不熟悉加之本身对什么滚动高度元素距离顶部距离不是很了解,花了挺长时间的,这几天有空,就研究了下。

2、先看效果

在这里插入图片描述 额,tab点击没有加效果,看着不明显,你懂我的意思就行 哈哈,电商里面最常见了

3、页面搭建

先搞一个 tab,然后下面就是 几个对应的div盒子

// 标题
 <div class="tab" >
      <span v-for="item in 4" 
              :key="item" @click="toView(item)" >
          {{`滚到${item}去`}}
      </span>
</div>
//内容
// 这是采用动态绑定ref 方便获取对应 dom 距离顶部的距离
// 同时也动态绑定元素的背景色和高度,便于区分
<div v-for="item in 4" :key="item" 
        :ref="'scrollView'+item" :id="'tab'+item" 
        class="item_box" :style="getStyle(item)" >
            {{item}}
</div>

4、动态绑定如下:

// getRandomArbitrary 用于生产指定区间的随机数
 computed:{
   getStyle(){
        return function (index){
            // 高度我就 *对应的 index来递增了
            let height = this.getRandomArbitrary(110,300)*index
            return {
                'background':
                   `linear-gradient(rgb(240,255,240),rgb(${this.getRandomArbitrary(230,255)}, ${this.getRandomArbitrary(230,240)}, ${this.getRandomArbitrary(240,255)}))`,
               height:`${height}px`
           }
        }
    }
},

5、开始实现:

目前用了三种方式:

  1. 锚点跳转
  2. ele.scrollIntoView() api跳转
  3. 老老实实用 window.scrollTo

5、1 锚点

//  锚点简单,搞个a标签,href指向对应盒子的 id就可以了,但是有个毛病
//:8080/anchor#tab1,路由也变成了这样,而且还添加到了页面历史记录中了
anchorWay(){
      let link = document.createElement("a")
       link.href = '#'+'tab'+index
       link.click()
       link.removeChild()
},

5.2、scrollIntoView

//这个也简单,想要跳转到哪个元素,就在这个元素上调用此api就行了
//还支持动画,不过ios不支持
// 这个有个弊端就是,他只能让元素滚动到页面顶部,或者元素底部在页面底部
// 一般我们上面还有个导航的 所以跳转后还需要动态去改变下距离顶部距离
scrIntoView(ele){
  // ele.scrollIntoView({behavior: "smooth", block: "start"})
    ele.scrollIntoView(true)
},

5.3、window.scrollTo

这个最方便了,直接找好需要滚动的位置,传入即可window.scrollTo(x,y)
我想来个动画呢
window.requestAnimationFrame

这个api之前有写过,有兴趣可看看之前写的,简单说下,这个api是请求开启一个动画,接收一个函数,会自动以 浏览器刷新的频率去执行,也就是说 如果我们,不断的改变 传入 window.scrollTo(x,y)中的 y值,这样就可以呈现动画的效果了。 好比 1+10+9+8+7+....+0.1 总有一天会加到100

分成几个小步骤

5.3.1、点击tab时

主要目的,获取需要的目标盒子距离顶部的距离(对应元素距离屏幕顶部),同时,当该元素距离顶部的距离 == 顶部导航高度(一般可以已知)时,不进行滚动

// 点击 tab
toView(index){
     let refV = `scrollView${index}`
     let scrView = this.$refs[refV][0]
     // 目标盒子 距离顶部距离
     let viewTop = parseInt( scrView.getBoundingClientRect().top )
     // 31 为顶部导航高度,可灵活变更 已在导航下方 return
     if( Math.abs(viewTop) < 32 ) return
     this.winScrllToView(viewTop - 31)
 },

5.3.2、获取当前window已滚动距离和需要滚动的目标位置

// y 目标元素距离顶部的距离(已减去导航高度)
 winScrllToView(y){
      // 页面当前滚动距离
      let sTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // 页面滚动目标位置
      this.sTarget = parseInt (sTop + y)
      // 页面滚动当前位置
      this.nowLocation = parseInt(sTop)

      this.animaScrll()
  },

5.3.3、动画函数

已经知道了滚动的目标位置,和当前滚动位置,接下来就是实现滚动距离的累加(累减,上滚动时)

  // 动画函数
  animaScrll(){
  // 累加值 为 目标位置 - 已经滚动距离 / 8 呈现累加值递减
   let addDis =  (this.sTarget - this.nowLocation) / 8 

   this.nowLocation += addDis 
   window.scrollTo(0,this.nowLocation)
    // 类似定时器 会返回一个id 用来清除
   this.aniTimer = window.requestAnimationFrame(this.animaScrll)
    // 理想状态是  目标值  == 累加滚动的值 实际上不肯的,边界值可以自行判断
   if( Math.abs(this.sTarget  - this.nowLocation) <= 2 ) {
       window.cancelAnimationFrame(this.aniTimer)
       this.nowLocation = 0
       this.aniTimer = null
   }
}

好了,整个过程就完了,总的来说还是 window.scrollTo 来的直接暴力。requestAnimationFrame也存在部分兼容问题

预览图
收藏
评论区