前景

由于VUE使用虚拟dom，导致滚动条滑动到具体元素非常生硬，在github上看到一位作者写了不错的方法因此记载下来分享

作者地址

传送们

代码

/** y: the y coordinate to scroll, 0 = top* duration: scroll duration in milliseconds; default is 0 (no transition)* element: the html element that should be scrolled ; default is the main scrolling element*/
function scrollToY (y, duration = 0, element = document.scrollingElement) {// cancel if already on target positionif (element.scrollTop === y) return;const cosParameter = (element.scrollTop - y) / 2;let scrollCount = 0, oldTimestamp = null;function step (newTimestamp) {if (oldTimestamp !== null) {// if duration is 0 scrollCount will be InfinityscrollCount += Math.PI * (newTimestamp - oldTimestamp) / duration;if (scrollCount >= Math.PI) return element.scrollTop = y;element.scrollTop = cosParameter + y + cosParameter * Math.cos(scrollCount);}oldTimestamp = newTimestamp;window.requestAnimationFrame(step);}window.requestAnimationFrame(step);
}/** duration: scroll duration in milliseconds; default is 0 (no transition)* this function is using the scrollToY function*/
function scrollToTop(duration = 0) {scrollToY(0, duration, document.scrollingElement);
}/** id: the id of the element as a string that should be scrolled to* duration: scroll duration in milliseconds; default is 0 (no transition)* this function is using the scrollToY function on the main scrolling element*/
function scrollToId(id, duration = 0, customOffset = 0) {const offset = Math.round(document.getElementById(id).getBoundingClientRect().top);scrollToY(document.scrollingElement.scrollTop + offset + customOffset, duration);
}/** element: the node object that should be scrolled to* duration: scroll duration in milliseconds; default is 0 (no transition)* this function is using the scrollToY function on the main scrolling element*/
function scrollToElement(element, duration = 0, customOffset = 0) {const offset = Math.round(element.getBoundingClientRect().top);scrollToY(document.scrollingElement.scrollTop + offset + customOffset, duration);
}

总结VUE控制滚动滑动方法相关推荐

cocos2.x 小游戏Scrollview滚动视图控制滚动的方法
控制台log输出为何频频失踪? wxss代码为何频频失效? wxml布局为何乱作一团? 究竟是道德的沦丧?还是人性的缺失? 让我们一起来走跑进科学前言今天写排行榜切换排行榜时需要刷新排行榜的排 ...
控制DIV内容滚动的方法，实现不用拖滚动条就可以看到最新消息
三种控制DIV内容滚动的方法: 本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群: 281442983 (点击链接加入群:http://jq.qq.com/?_wv ...
vue实现上下滑动翻页_vue 实现滚动到底部翻页效果(pc端)
pc端vue 滚动到底部翻页效果,具体内容如下所示: html: [{{item.code||item.name}}] {{item.name}} js: 先写滚动事件 handleScroll() ...
android listview 向上自动滚动效果,Android通过代码控制ListView上下滚动的方法
本文将介绍一种通过代码控制ListView上下滚动的方法. 先上图: 按下按钮会触发ListView滚动或停止. 实现该功能并不难,下面给出主要代码MainActivity.java package ...
【vue开发问题-解决方法】（八）利用axios拦截器实现elementUI中加载动画，控制加载区域
[vue开发问题-解决方法](八)利用axios拦截器实现elementUI中加载动画,控制加载区域参考文章: (1)[vue开发问题-解决方法](八)利用axios拦截器实现elementUI中加 ...
【VUE】vue实现登录滑动拼图验证的两种方法，纯前端组件验证以及前后端同时验证
vue实现登录滑动拼图验证的两种方法: 第一种是纯前端组件验证,只能区分是人为操作还是机器操作. 第二种是前后端同时验证,这种方法加上后端校验相对会更安全一些.(注:在最底部加上了同时兼容移动端的方法 ...
vue 滑动加载列表 php,通过原生vue添加滚动加载更多功能
这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 vue中添加滚动加载更多,因为是单页面所以需要在 ...
vue手势滚动_vue-router 手势滑动触发返回功能
vue-router的路由变换只存在"变换前"和"变换后",不存在"切换中"的状态,所以做不到大多数app(微信那样的)在滑动过程中让界面跟 ...
vue实现上下滑动翻页_基于vue实现上下滑动翻页效果
18年年底的时候,一直在做年度报告的H5页面,因为项目需要,需要实现上下滑动翻页,并且上滑的页面比正常页面的比例要缩小一定比例. 效果类似于http://www.17sucai.com/pins/de ...

总结VUE控制滚动滑动方法

前景

作者地址

代码

总结VUE控制滚动滑动方法相关推荐

最新文章

热门文章