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中使用mockjs代码实例
Nov 25 Vue.js
Vue组件生命周期运行原理解析
Nov 25 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 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的FTP学习(三)
2006/10/09 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
javascript getElementsByClassName函数
2010/04/01 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
详谈javascript异步编程
2016/02/21 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
简单了解python中的与或非运算
2019/09/18 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
Python类的继承super相关原理解析
2020/10/22 Python
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
法语专业求职信
2014/07/20 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
保护校园环境倡议书
2015/04/28 职场文书
九年级数学教学反思
2016/02/17 职场文书
Python 数据可视化之Bokeh详解
2021/11/02 Python
MySQL普通表如何转换成分区表
2022/05/30 MySQL
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers