vue中平滑地回到顶部，回到底部

监听的滚动条需要平稳滑动，所以设置几个值,一个定时器。一个定义的scrollTop，方便后续操作

data(){scrollTop: 0,timer: null,scrollBottom: 0,timers: null,// 回到底部的，距离底部的scrolltopbottomHeight: 0
}

首先像大多数一样。可以在挂载的时候写一个监听scroll，注意：选择的容器一定要是包含滚动条的，笔者之前老想获取的容器高度。根本没得滚动条。哭辽哭辽~~

mounted() {this.$el.querySelector("#chatList").addEventListener("scroll", this.scrollToTop);},

就像写括号先把后半截写出来一样，addEventListener也需要移除的吖

destroyed() {clearInterval(this.timer);this.$el.querySelector("#chatList").removeEventListener("scroll", this.scrollToTop);},

接下来就是实现的方法了

// 监听的事件
scrollToTop() {console.log(this.$el.querySelector("#chatList").scrollTop);this.scrollTop = this.$el.querySelector("#chatList").scrollTop;},
// 点击回到顶部的事件backTop() {clearInterval(this.timers);// 重新点击回到顶部。清除之前的定时器if (this.timer != null) {clearInterval(this.timer);}this.timer = setInterval(() => {this.scrollToTopTimer();}, 20);},
// 平缓滚动的事件scrollToTopTimer() {let scrollTop = this.scrollTop;if (scrollTop > 0) {scrollTop -= 100;if (scrollTop <= 0) {scrollTop = 0;clearInterval(this.timer);}}this.$el.querySelector("#chatList").scrollTop = scrollTop;},

回到底部事件，没得平缓的过程，等以后补充

 setScrollBottom() {const container = this.$el.querySelector("#chatList");container.scrollTop = container.scrollHeight;},

回到底部的动画过程来了

// 回到底部
setScrollTop() {clearInterval(this.timer);if (this.timers != null) {clearInterval(this.timers);}const container = this.$el.querySelector("#chatList");
// 浏览器可视窗口的高const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;this.bottomHeight = container.scrollHeight - clientHeight;
//超出窗口的值就是底部的scrolTop的值this.timers = setInterval(() => {this.scrollToBottomTimers();}, 20);},
// 回到底部的定时的函数scrollToBottomTimers() {// 回到顶部到半路，点击回到底部的时候if (this.scrollTop != this.$el.querySelector("#chatList").scrollHeight) {this.scrollBottom = this.scrollTop;}if (this.scrollBottom >= this.bottomHeight) {clearInterval(this.timers);} else {this.scrollBottom += 100;}this.$el.querySelector("#chatList").scrollTop = this.scrollBottom;},

vue中平滑地回到顶部，回到底部相关推荐

vue底部跳转_Vue实现回到顶部和底部动画效果
本文实例为大家分享了Vue实现回到顶部和底部动画效果的具体代码,供大家参考,具体内容如下代码: < > export default{ props:{ step:{ //此数据是控制动画 ...
html锚点链接回到顶部,回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器...
插件描述:回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器回到顶部和回到底部在当前的网页中应用时相当广泛的为了更好的体验,我们在回到顶部或回到底部的过程中采用一个渐进的滚动那么我们就要 ...
解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题
解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题参考文章: (1)解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题 (2)https://www.cnblogs.com/zlfP ...
php 回到顶部,回到顶部总结
回到顶部总结网站中的回到顶部功能有益于增强用户体验,当一个页面很长很长时,回到顶部是必不可少的. 回到顶部按钮,可以使用图片,背景图,矢量字体图标,也可以使用代码 css 生成.这里使用 css 生 ...
Vue中Echarts柱状图自定义顶部亮点
HTML部分 <div id="ParkingLotLoadRanking" ref="ParkingLotLoadRanking" style=&quo ...
HTML学习笔记之二（回到顶部与回到底部）
回到顶部回到底部回到顶部的俩种方式一.使用js [javascript] view plaincopy $('html, body').animate({ scrollTop: 0 }, 'fa ...
html文本滚动到底后自动回到顶部,JS 实现DIV 滚动至顶部后固定
JS 实现DIV 滚动至顶部后固定 DIV滚动至顶部后固定 Test Div function menuFixed(id) { var obj = document.getElementById(id ...
js平滑滚动到顶部,底部,指定地方 animate()
采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. 滚动到顶部: $(' ...
关于ListView顶部和底部滚（拖）动出现阴影解决方案
在listview中滑动到顶部或者是底部的时候,在默认的情况下,是会有黄色或者黑色的阴影出现. 这个该怎么解决呢,请往下看: 在不同的版本上解决的方法是不同的,在2.3之前可以在listview的属性 ...

vue中平滑地回到顶部，回到底部

vue中平滑地回到顶部，回到底部相关推荐

最新文章

热门文章