基于vue监听滚动事件实现锚点链接平滑滚动的方法_vue滚动锚点资源-CSDN文库

版权申诉

监听滚动事件

81 浏览量 2020-08-28 05:57:53 上传评论收藏 167KB PDF 举报

资源推荐

资源详情

资源评论

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

本篇文章主要介绍了基于vue监听滚动事件实现锚点链接平滑滚动的方法，非常具有实用价值，有兴趣的可以了解一下

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

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

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

1.左边点击类别，右边显示相应类别的菜品列表(平滑滚动)

2.滚动右边的滚动条，左边对应的显示当前样式

3.若从别的页面点击菜品进来该页面，则该菜品为指定效果

小编也是vue的初学者，在阅读了大量的文章后，其中借鉴//www.jb51.net/article/110325.htm 该文章，收到了很多启发后，结合我们的功能加以完善。小编的和借鉴的文章侧重点不同，建议大家在看之

前可以先看一下上面的，以便于梳理的更清楚。

:scrollTop(滚动之根本)

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

所以不得已放弃。

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

一、组件一、组件html结构：结构：

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

注意看注释：: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

}

}

}

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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

版权申诉

weixin_38655309

粉丝: 5
资源: 905

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip