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+Element实现增删改查的示例源码
Nov 23 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 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基础知识:类与对象(1)
2006/12/13 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
简单实现php上传文件功能
2017/09/21 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
js判断节假日实例代码
2017/12/27 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
js实现简单页面全屏
2019/09/17 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
python多线程操作实例
2014/11/21 Python
Python list操作用法总结
2015/11/10 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
Tostadora意大利:定制T恤
2019/04/08 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
南京某公司笔试题
2013/01/27 面试题
2014年“世界无车日”活动方案
2014/09/21 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
离婚上诉状范文
2015/05/23 职场文书
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis