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

请叫我海龟先生 等级 1326 0 0
标签: vueJavascript

1、前言

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

2、先看效果

前端 滚动到目标元素位置  VUE 版本 额,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也存在部分兼容问题

收藏
评论区

相关推荐

基于Vue实现一个有点意思的拼拼乐小游戏
笔者去年曾写过一个类似的拼拼乐小游戏,技术栈采用自己的Xuery框架和原生javascript实现的,脚手架采用gulp来实现,为了满足对vue的需求,笔者再次使用vue生态将其重构,脚手架采用比较火的vuecli。 前言 为了加深大家对vue的了解和vue项目实战,笔者采用vue生态来重构此项目,方便大家学习和探索。技术栈如下: vuecli4
前端培训-Vue专题之Vue基础
简介特点:MVVM框架,双向绑定,数据驱动,单页面,组件化。 区别Vue 和 jQuery 的区别:不直接操作DOM,而是操作数据。案例:Hello World 你好,世界HTML代码:xml<h1msg</h1jQuery实现javascript$("h1").text("你好,世界");Vue 实现javascriptthis.msg '你好,世界'
10分钟阅读一篇关于Vue
![file](https://oscimg.oschina.net/oscnet/up-4f8ccb1755bb73c4ffe6a7ba91253ddc.jpg "file") Vue-cli Vue脚手架的基本用法,vue脚手架用于快速生成vue项目基础架构: 地址: https://cli.vuejs.org/zh/ 使用方式,安装3.x版本
CodeMirror 在线代码编辑器
像百度编辑器插件部分、菜鸟教程示例等高德地图都在使用,这里也记录一下: CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件......vue 中使用 参见:https://www.npmjs.com/package/vue-codemirrorhttps://blog.csdn.net/oumaharuki/
React与Vue的相同与不同点
我们知道JavaScript是世界上最流行的语言之一,React和Vue是JS最流行的两个框架。所以要想前端的开发那么必须掌握好这两个框架。 那么这两个框架有什么不同呢? **React 和 Vue 相同之处,它们都有:** * 使用 Virtual DOM * 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件
React面试必问Fiber和Hooks,一次搞定
国内的前端领域,Vue 和 React 是最火的两个框架,要说岗位数量,Vue可能会更多一点。 但如果把公司范围缩小到大厂,或者把范围扩展到全球,那React无疑独占鳌头。 ![](https://oscimg.oschina.net/oscnet/ba57134c-6a7d-47d8-a317-7ad3976a1a77.jpg "2019年
VUE AntDesign DatePicker设置默认显示当前日期
1:main.js中引入依赖 import Vue from "vue"; import { DatePicker } from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; #设置中文 import moment from 'm
Vue CLI 3搭建vue+vuex 最全分析
一、介绍 ==== Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件: **CLI**:`@vue/cli` 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令) **CLI 服务**:`@vue/cli-service`是一个开发环境依赖。构建于 [we
Vue CLI 2.x搭建vue,目录最全分析
一、vue-cli介绍 =========== vue-cli是一个用于快速搭建vue项目的 脚手架。 二、vue-cli安装、更新 ============== 安装过nodeJs 、cnpm 后,全局安装vue-cli(以后其他项目可直接使用): cnpm install -g vue-cli 更新: cnpm update
Vue 全家桶
vue全家桶。 使用过vue的程序员一般这样评价它,“vue.js兼具angular.js和react.js的优点”。Vue.js 是一个JavaScript MVVM(Model-View-ViewModel)库,用于渐近式构建用户界面。它以数据驱动和组件化思想构建,采用自底向上增量开发的设计思想。相比Angular.js,Vue.js API更加简洁;
Vue 全家桶、原理及优化简议
不少互联网公司都在使用vue技术栈,或称为vue全家桶。 使用过vue的程序员一般这样评价它,“vue.js兼具angular.js和react.js的优点”。Vue.js 是一个JavaScript MVVM(Model-View-ViewModel)库,用于渐近式构建用户界面。它以数据驱动和组件化思想构建,采用自底向上增量开发的设计
vue 路由 懒加载
原文链接: [vue 路由 懒加载](https://my.oschina.net/ahaoboy/blog/1618024) 路由懒加载 ===== 当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。 结合 Vue 的[异步组
vue 路由懒加载
原文链接: [vue 路由懒加载](https://my.oschina.net/ahaoboy/blog/1796979) 路由懒加载 ===== 当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。 结合 Vue 的[异步组件
阿里巴巴前端练习生学习笔记
字符串引擎和Javascript引擎的区别:是否对于DOM进行全部改变? 相关资料链接• Wiki MVC • Wiki MVVM • Mustach • Handlebars • React • Angular • Vue • Bootstrap • Ant Design • Fusion Des