返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue实现锚点定位功能
  • 820
分享到

vue实现锚点定位功能

2024-04-02 19:04:59 820人浏览 薄情痞子
摘要

本文实例为大家分享了Vue实现锚点定位的具体代码,供大家参考,具体内容如下 这里主要是实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能 如果是获取浏览器的滚动高度,各个浏

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

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

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

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

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'
 //     })
 //   }
 // })
}

此处附上效果图:

第一次实现锚点定位及滚动高亮锚点的效果,略有不足,有什么问题或建议请多多指正。
这里非常感谢这篇文章带来的启发,又get一个新知识点。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: vue实现锚点定位功能

本文链接: https://www.lsjlt.com/news/129383.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue实现锚点定位功能
    本文实例为大家分享了vue实现锚点定位的具体代码,供大家参考,具体内容如下 这里主要是实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能 如果是获取浏览器的滚动高度,各个浏...
    99+
    2024-04-02
  • vue实现锚点定位功能的方法
    这篇文章主要讲解了“vue实现锚点定位功能的方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue实现锚点定位功能的方法”吧!本文实例为大家分享了vue实现锚点定位的具体代码,供大家参考,...
    99+
    2023-06-20
  • 怎么使用vue实现锚点定位功能
    本文小编为大家详细介绍“怎么使用vue实现锚点定位功能”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么使用vue实现锚点定位功能”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。这里主要是实现了一个简单的滚动触发...
    99+
    2023-07-04
  • vue+element ui实现锚点定位
    本文实例为大家分享了vue + element ui 实现锚点定位的具体代码,供大家参考,具体内容如下 vue <el-row :gutter="20"> &l...
    99+
    2024-04-02
  • 微信小程序怎么实现锚点定位功能
    这篇“微信小程序怎么实现锚点定位功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序怎么实现锚点定位功能”文章吧。实...
    99+
    2023-06-08
  • 微信小程序如何实现锚点定位功能
    这篇文章将为大家详细讲解有关微信小程序如何实现锚点定位功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前言在小程序开发中,我们经常会遇到滚动列表查看的需求,那么使用锚点定位来实现可以达到交互体验更加友好...
    99+
    2023-06-20
  • vue+element ui实现锚点定位的方法
    本篇内容主要讲解“vue+element ui实现锚点定位的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue+element ui实现锚点定位的方法”吧!本文实例为大家分享了vue + ...
    99+
    2023-06-20
  • vue实现锚点定位的代码怎么写
    本篇内容主要讲解“vue实现锚点定位的代码怎么写”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue实现锚点定位的代码怎么写”吧!具体代码如下:vue<el-row :gutte...
    99+
    2023-07-04
  • 微信小程序实现锚点定位功能的方法实例
    前言 在小程序开发中,我们经常会遇到滚动列表查看的需求,那么使用锚点定位来实现可以达到交互体验更加友好的效果,我们看下项目中实现的效果:    &nbs...
    99+
    2024-04-02
  • vue中的锚点定位问题
    目录vue锚点定位锚点定位与平滑滚动反定位支持锚点定位bug无效和替代方式在vue项目中定义一个方法不适用锚点定位vue锚点定位 锚点定位与平滑滚动反定位支持 代码如下 html ...
    99+
    2024-04-02
  • vue中如何实现锚点定位平滑滚动
    目录vue锚点定位平滑滚动vue点击tabs平滑滚动(锚点事件)定义兼容使用vue锚点定位平滑滚动 下面是简单的代码,拿来即用 html  //给div盒子设定单击事件和r...
    99+
    2024-04-02
  • VUE + OPENLAYERS实现实时定位功能
    目录前言一、定义标签样式二、模拟 GeoJSON 数据三、创建 VerctorLayer四、构建地图五、模拟实时移动总结前言 本系列文章介绍一个简单的实时定位示例,示例的组成主要包括...
    99+
    2024-04-02
  • Vue使用高德地图选点定位搜索定位功能实现
    目录一、申请高德地图的使用密钥key。二、安装依赖。三、使用。四、常见问题。项目下载: 高德地图测试demo,高德地图测试demo-Node.js文档 效果图: 一、申请高德地图的...
    99+
    2022-11-13
    vue高德地图定位 vue高德地图搜索定位
  • HTML中怎么创建锚点定位
    这篇文章主要介绍“HTML中怎么创建锚点定位”,在日常操作中,相信很多人在HTML中怎么创建锚点定位问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML中怎么创建锚点定位”...
    99+
    2024-04-02
  • vue模态框实现动态锚点
    本文实例为大家分享了vue模态框实现动态锚点的具体代码,供大家参考,具体内容如下 参考:vue中实现锚点跳转及滚动监听的简便方法 效果图: 代码: // html代码 <te...
    99+
    2024-04-02
  • Android制作一个锚点定位的ScrollView
    目录完成效果图需求分析 怎么滚动?滚动到哪里?代码实现 锚点变化位置处理 查找最近两个View 计算距离 计算百分比 回调监听 因为遇到了一个奇怪的需求:将垂直线性滚...
    99+
    2024-04-02
  • java如何实现定位功能
    Java可以通过使用GPS或Wi-Fi来实现定位功能。以下是几种实现定位功能的方法:1. 使用GPS:Java可以通过调用系统的GP...
    99+
    2023-09-21
    java
  • php如何实现定位功能
    这篇文章主要介绍“php如何实现定位功能”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“php如何实现定位功能”文章能帮助大家解决问题。php实现定位功能的方法:1、注册成为百度用户,成为地图开放平台...
    99+
    2023-07-04
  • Flutter组件-ListView滑动到指定位置(SingleChildScrollView 实现锚点效果)
    一.SingleChildScrollView 简介: ListView 组件默认内容比较多的时候具有延迟加载的特性。  SingleChildScrollView 不支持基于 Sliver 的延迟实例化模型,也就是使用 SingleChi...
    99+
    2023-09-09
    flutter 滑动到指定位置 锚点 滚动到指定位置
  • vue实现锚点跳转之scrollIntoView()方法详解
    目录vue锚点跳转scrollIntoView()方法滚动到某个特定元素 一个简单的vue锚点跳转demovue锚点跳转scrollIntoView()方法 滚动到某个特定...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作