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+iview分页组件的封装
Nov 17 Vue.js
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue组件是如何解析及渲染的?
Jan 13 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
VUE递归树形实现多级列表
Jul 15 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
ajax实现无刷新分页(php)
2010/07/18 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
node.js操作MongoDB的实例详解
2017/10/11 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
零基础学Python(一)Python环境安装
2014/08/20 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
keras.layer.input()用法说明
2020/06/16 Python
python 代码运行时间获取方式详解
2020/09/18 Python
python 读取、写入txt文件的示例
2020/09/27 Python
python实现经典排序算法的示例代码
2021/02/07 Python
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
出生证明公证书
2014/04/09 职场文书
纪检监察建议书
2014/05/19 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
毕业生个人自荐书
2015/03/05 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript
Nginx动静分离配置实现与说明
2022/04/07 Servers