vue实现锚点定位功能


Posted in Vue.js onJune 29, 2021

本文实例为大家分享了vue实现锚点定位的具体代码,供大家参考,具体内容如下

这里主要是实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能
如果是获取浏览器的滚动高度,各个浏览器有所差异,使用以下几种方式:

Chrome: document.body.scrollTop
Firefox: document.documentElement.scrollTop
Safari: window.pageYOffset

我这里是局部元素滚动,因此稍有差异。先附上html及css代码块:

scroll-content为滚动区域, operation-btn为控制锚点行为的按钮。

<template>
  <div class="anchor-point">
    <!-- 滚动区域 -->
    <div class="scroll-content" @scroll="onScroll">
      <div class="scroll-item" style="height: 500px;background: #3a8ee6;">一层</div>
      <div class="scroll-item" style="height: 500px;background: red;">二层</div>
      <div class="scroll-item" style="height: 500px;background: #42b983">三层</div>
      <div class="scroll-item" style="height: 1000px;background: yellow;">四层</div>
    </div>
    <!-- 按钮 -->
    <div class="operation-btn">
      <div v-for="(item, index) in ['一层','二层','三层','四层']" :key="index" @click="jump(index)"
           :style="{background: activeStep === index ? '#eeeeee' : '#ffffff'}">{{item}}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .anchor-point {
    flex-basis: 100%;
    display: flex;
    overflow: hidden;
    .scroll-content {
      height: 100%;
      width: 90%;
      overflow: scroll;
    }
    .operation-btn {
      width: 10%;
      height: 100%;
    }
  }
</style>

通过监听滚动事件,高亮显示锚点按钮

这里是通过遍历滚动项,判断滚动条滚动距离是否大于当前项的可滚动距离(即距离其offsetParent顶部的距离,这里是body)

// 滚动触发按钮高亮
onScroll (e) {
  let scrollItems = document.querySelectorAll('.scroll-item')
  for (let i = scrollItems.length - 1; i >= 0; i--) {
    // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
    let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop
    if (judge) {
      this.activeStep = i
      break
    }
  }
},

添加点击事件,根据锚点滚动至对应区域并实现平滑滚动

这里参考网上的方法,将滚动距离细分为多个小段,并考虑向上向下的的滚动,实现滚动的过渡动画。
本来是打算使用scrollIntoView实现滚动动画,scrollIntoView在各个浏览器已经有很好的支持性,但是ScrollIntoViewOptions在浏览器的兼容性上还有问题,所以改用如下距离分割的方式。

// 点击切换锚点
jump (index) {
 let target = document.querySelector('.scroll-content')
 let scrollItems = document.querySelectorAll('.scroll-item')
 // 判断滚动条是否滚动到底部
 if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
   this.activeStep = index
 }
 let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)
 let distance = document.querySelector('.scroll-content').scrollTop // 滚动条距离滚动区域顶部的距离
 // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滚动条距离滚动区域顶部的距离(滚动区域为窗口)
 // 滚动动画实现, 使用setTimeout的递归实现平滑滚动,将距离细分为50小段,10ms滚动一次
 // 计算每一小段的距离
 let step = total / 50
 if (total > distance) {
   smoothDown(document.querySelector('.scroll-content'))
 } else {
   let newTotal = distance - total
   step = newTotal / 50
   smoothUp(document.querySelector('.scroll-content'))
 }

 // 参数element为滚动区域
 function smoothDown (element) {
   if (distance < total) {
     distance += step
     element.scrollTop = distance
     setTimeout(smoothDown.bind(this, element), 10)
   } else {
     element.scrollTop = total
   }
 }

 // 参数element为滚动区域
 function smoothUp (element) {
   if (distance > total) {
     distance -= step
     element.scrollTop = distance
     setTimeout(smoothUp.bind(this, element), 10)
   } else {
     element.scrollTop = total
   }
 }

 // document.querySelectorAll('.scroll-item').forEach((item, index1) => {
 //   if (index === index1) {
 //     item.scrollIntoView({
 //       block: 'start',
 //       behavior: 'smooth'
 //     })
 //   }
 // })
}

此处附上效果图:

vue实现锚点定位功能

第一次实现锚点定位及滚动高亮锚点的效果,略有不足,有什么问题或建议请多多指正。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue 插槽简介及使用示例
Nov 19 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Vue3.0写自定义指令的简单步骤记录
vue.js Router中嵌套路由的实用示例
Jun 27 #Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
vue-router中hash模式与history模式的区别
Vue-Element-Admin集成自己的接口实现登录跳转
Vue + iView实现Excel上传功能的完整代码
You might like
php和javascript之间变量的传递实现代码
2012/12/19 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
PHP排序算法类实例
2015/06/17 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
PHP new static 和 new self详解
2017/02/19 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
javascript 跳转代码集合
2009/12/03 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Python下Fabric的简单部署方法
2015/07/14 Python
python利用线程实现多任务
2020/09/18 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
庆元旦广播稿
2014/02/10 职场文书
优乐美广告词
2014/03/14 职场文书
百年校庆节目主持词
2014/03/27 职场文书
幼儿园运动会口号
2014/06/07 职场文书
完整版商业计划书
2014/09/15 职场文书
汽车转让协议书
2015/01/29 职场文书
投标邀请书范本
2015/02/02 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
Python Socket编程详解
2021/04/25 Python
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
python 远程执行命令的详细代码
2022/02/15 Python