广告
返回顶部
首页 > 资讯 > 前端开发 > html >vue如何监听滚动事件实现锚点链接平滑滚动
  • 466
分享到

vue如何监听滚动事件实现锚点链接平滑滚动

2024-04-02 19:04:59 466人浏览 泡泡鱼
摘要

这篇文章将为大家详细讲解有关Vue如何监听滚动事件实现锚点链接平滑滚动,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。基于vue监听滚动事件,实现锚点链接平滑滚动近日在做一

这篇文章将为大家详细讲解有关Vue如何监听滚动事件实现锚点链接平滑滚动,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

基于vue监听滚动事件,实现锚点链接平滑滚动

近日在做一个vue项目的餐饮模块,小编需要实现一个菜单列表显示的功能(如图所示:左边为菜单类别,右边显示相对应的菜品)

vue如何监听滚动事件实现锚点链接平滑滚动

小编将此分为三个功能模块来实现(本来一张动画就清晰明了,小编太笨,只得口述一下):

1.左边点击类别,右边显示相应类别的菜品列表(平滑滚动)
2.滚动右边的滚动条,左边对应的显示当前样式
3.若从别的页面点击菜品进来该页面,则该菜品为指定效果

小编也是vue的初学者,在阅读了大量的文章后,其中借鉴https://www.jb51.net/article/110325.htm 该文章,收到了很多启发后,结合我们的功能加以完善。小编的和借鉴的文章侧重点不同,建议大家在看之前可以先看一下上面的,以便于梳理的更清楚。

:scrollTop(滚动之根本)

在初写项目的尝试过程中,小编一直改变的是document.body.scrollTop的值来实现滚动,但是后来逐渐发现很邪门,有时给其赋值并没有作用,而且过程也很麻烦,又查阅了一些资料也没有解决办法,所以不得已放弃。

之后无意中看到:scrollTop, 便尝试开始使用vue中的属性直接进行绑定滚动的变量值,功能实现反而简单了。下面详细讲述:

一、组件html结构:

结构布局很简单,在此多说是想给大家讲述清楚一点儿右边菜品的结构,方便绑定:scrollTop属性,小编就踩了这个坑...

vue如何监听滚动事件实现锚点链接平滑滚动

注意看注释::scrollTop 的位置改变菜品列表的scrollTop值,来实现相应的滚动

二、实现锚链接平滑滚动

该功能是参考之前博主的文章的,方法基本没改什么,简单易懂,直接放代码

jump(index){
    const cateItem = document.querySelectorAll('.cate-item');
    let total = cateItem[index].offsetTop;
    let distance = this.container.scrollTop // 获取到顶部的距离(this.container便是.cate-list,为了方便存起来了)
    let step = total / 50;
    this.isActive = index; // 菜单列表显示当前样式
    const _this = this;
    if (total > distance) {
     smoothDown()
    } else {
     let newTotal = distance - total
     step = newTotal / 50
     smoothUp()
    }
    function smoothDown () {
     if (distance < total) {
     distance += step
     _this.scrollTop = distance;
     setTimeout(smoothDown, 10);
     } else {
     _this.scrollTop = total
     }
    }
    function smoothUp () {
     if (distance > total) {
     distance -= step
     _this.scrollTop = distance
     setTimeout(smoothUp, 10)
     } else {
     _this.scrollTop = total
     }
    } 
    }

三、监听滚动事件,修改锚点状态

在vue中钩子函数监听菜品列表(this.container)的滚动事件,

 mounted(){
   // 监听scroll事件
   const _this = this;
   setTimeout(function(){
    _this.currentStick(); 
    const rightItem = document.querySelectorAll('.cate-item');
    const catelist = document.querySelectorAll('.cate-list')[0];
    var length = rightItem.length;
    var height = rightItem[length-1].offsetHeight;
    var scrollHeight = document.querySelectorAll('.cate-menu-wrapper')[0].offsetHeight;
    // 设置最后一个类别菜品列表的高度(小于适配器高度的话与适配器等高),不然点击锚点不能够置顶
    if(height < scrollHeight){
     rightItem[length-1].style.height = scrollHeight+'px';
    } 
    var arr =[];
    rightItem.forEach(function(v, i){
     arr.push({top: v.offsetTop, height: v.offsetHeight, index: i});
    })
    _this.itemVal = arr; 
    const cateList = document.querySelectorAll('.cate-list')[0];
    cateList.addEventListener('scroll', _this.onScroll);
    _this.container = cateList;
   }, 500)
  },

这里写的有点啰嗦了,设置setTimeout延迟是为了能够获取到元素(谁有好办法快推荐给我),为了在滚动中能够对应列表显示锚点当前状态,存了一个数据itemAll,存了该菜品类别区域的scrollTop,索引,高度。(啰嗦,太啰嗦了)

methods: {
 onScroll () {
    var _this = this;
    _this.itemVal.forEach(function(obj, i){
     _this.scrollTop = _this.container.scrollTop;
     if(_this.scrollTop >= obj.top && _this.scrollTop < (obj.top + obj.height-10)){
      // scrollTop的移动位置要在类别的菜品列表中才显示对应锚点的当前状态
      _this.isActive = obj.index;
     }
    })
   },
}

三、点击菜品进入页面,该菜品置顶的联动效果(该功能其实有隐藏性的bug,我们项目已取消该功能)

currentStick(){
     const {dishId} = this.$route.query;
     const cateContent = document.querySelectorAll('.cate-content');
     const _this = this;
     cateContent.forEach(function(v, i){
      if(v.id == dishId){
       _this.scrollTop = v.offsetTop; 
      }
     })
   },

该功能用:scrollTop绑定的话便简单了许多,之前用document.body.scrollTop 设置值一直没有作用。

好了,基本上所有的代码都帖出来了,说的应该也详细吧(我尽力了),该方法感觉其实还是在操作dom元素和js,枉用vue。但是一时也没有更好的办法来实现。

关于“vue如何监听滚动事件实现锚点链接平滑滚动”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: vue如何监听滚动事件实现锚点链接平滑滚动

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

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue如何监听滚动事件实现锚点链接平滑滚动
    这篇文章将为大家详细讲解有关vue如何监听滚动事件实现锚点链接平滑滚动,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。基于vue监听滚动事件,实现锚点链接平滑滚动近日在做一...
    99+
    2022-10-19
  • vue监听滚动事件如何实现滚动监听
    这篇文章主要为大家展示了“vue监听滚动事件如何实现滚动监听”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue监听滚动事件如何实现滚动监听”这篇文章吧。在vu...
    99+
    2022-10-19
  • Vue怎么通过监听滚动事件实现动态锚点
    本文小编为大家详细介绍“Vue怎么通过监听滚动事件实现动态锚点”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue怎么通过监听滚动事件实现动态锚点”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。具体效果如下:一、...
    99+
    2023-07-04
  • vue+导航锚点联动-滚动监听和点击平滑滚动跳转的示例分析
    这篇文章主要为大家展示了“vue+导航锚点联动-滚动监听和点击平滑滚动跳转的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue+导航锚点联动-滚动监听...
    99+
    2022-10-19
  • Vue.js如何通过监听滚动事件实现动态锚点
    这篇文章主要介绍了Vue.js如何通过监听滚动事件实现动态锚点,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体效果如下:如果是传统项目,这...
    99+
    2022-10-19
  • vue中如何实现锚点定位平滑滚动
    目录vue锚点定位平滑滚动vue点击tabs平滑滚动(锚点事件)定义兼容使用vue锚点定位平滑滚动 下面是简单的代码,拿来即用 html  //给div盒子设定单击事件和r...
    99+
    2022-11-13
  • vue实现锚点跳转及滚动监听的方法
    vue中实现锚点跳转以及滚动监听跳转到相应标签的方法,供大家参考,具体内容如下 *注意·如果scroll-item的最后一个元素高度必须大于等于滚动区域的高度,不然最后...
    99+
    2022-11-13
  • 如何用CSS实现平滑滚动到锚点位置
    如何用CSS实现平滑滚动到锚点位置在网页设计中,锚点位置是指页面上的特定位置,当用户点击页面中的链接时,页面会平滑滚动到该位置。这种效果不仅可以带来良好的用户体验,还可以提升页面的美感。本文将介绍如何使用CSS实现平滑滚动到锚点位置,并给出...
    99+
    2023-11-21
    CSS 平滑滚动 锚点
  • 如何使用vue监听页面中某个div的滚动事件并判断滚动位置
    这篇文章主要介绍如何使用vue监听页面中某个div的滚动事件并判断滚动位置,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!  在开发中常常会遇到这样一个vue页面,页面分为左右两部分,左边是目录树,...
    99+
    2023-06-29
  • 如何利用原生JS实现触摸滑动监听事件
    前言 今天写一个小Demo,有个地方涉及到了左滑右滑的逻辑,本来想着用插件来着,但是想到自己好久没用原生JS写滑动的监听了,所以试着用原生JS来实现了一下,毕竟温故而知新嘛,同时做...
    99+
    2022-11-12
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作