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中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 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中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
Python读大数据txt
2016/03/28 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
安装PyInstaller失败问题解决
2019/12/14 Python
django form和field具体方法和属性说明
2020/07/09 Python
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript
详解JAVA中的OPTIONAL
2021/06/14 Java/Android
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS