当前位置:   article > 正文

2021-02-19_定时器 scrolltop 抖动

定时器 scrolltop 抖动

关于解决原生JavaScript的回到顶部功能的窗口滚动与定时器不能立即停止而且导致窗口抖动的问题

在这里插入图片描述

前情提要:凡是涉及 this 关键字的代码,一定要注意这一方面,this 的指向是否改变,运用过程中会 改变指向谁?

一、问题描述:

1、用原生JavaScript的
document.documentElement.scrollTop || document.body.scrollTop 实现滚动回到顶部,
2、结合给点击对象设置setInterval() 定时器函数,
3、等窗口滚动到顶部即scrollTop = 0时能正常停止,起作用,
4、但是如果中途想停止窗口滚动,在窗口滚动中途时,用户的鼠标滚动想让窗口停止滚动导致的窗口抖动,无法立即clearInterval(定时器对象)的窗口抖动问题;

在这里插入图片描述

二、分析原因&解决方法:

1、需要用到(ES6语法的)箭头函数 或 保存当前点击对象的this指向;
2、以上的即时停止窗口滚动回到顶部的抖动与不能立即停下的问题,

是因为在后面的 setInterval() 函数中的function() 与 
document.onmousewheel(或document.onwheel)function()中,
this 已经发生了改变,不是指向点击对象toTop的this了,
  • 1
  • 2
  • 3

所以 this.set 和之前的this.set(属于toTop对象的)就不一样了,
3、所以上面说解决方法是要用到箭头函数,让this指向不改变,始终指向
toTop这个点击对象,或者用一个变量保存好之前的toTop点击对象的set 属性,再在后面的function()
中使用,以防止this变质;

在这里插入图片描述

或者

在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/384017
推荐阅读
相关标签
  

闽ICP备14008679号