为了账号安全,请及时绑定邮箱和手机立即绑定

滚动条滚动时触发是为啥要这个呢isTop=false;

//滚动条滚动时触发
		window.onscroll=function(){
			var oTop=document.documentElement.scrollTop||document.body.scrollTop;
			if(oTop>clientHeight){
				btn.style.display="block";
			}else{
				btn.style.display="none";
			}
			//解决滚动条不能拖动下拉问题
           if(!isTop){
               clearInterval(timer);
           }
           isTop=false;
		}

这个一段代码还是迷糊糊的 特别是为啥要这个呢isTop=false;,中间不是做了判断了吗

正在回答

5 回答

我这边不用这个变量也是正常运行。Chrome

0 回复 有任何疑惑可以回复我~

首先搞明白,当你拖动鼠标滚轮的时候,触发的onscroll 事件不是一次,而是很多次,你可以做一个实验,

window.onscroll = function(){

      console.log(document.body.scrollTop);

      }

你随便滑动一次滚轮,当你停下时,输出的数字绝不止一次,这样就可以理解。

正常逻辑是这样, 当click 事件被触发后,定时器会被启用,然后每个一定的时间都会执行一次,每执行一次,会触发一次onscroll 事件,istop 的值会在 true & false 间来回变动。

但是当你滑动滚轮,就会触发多次哦那scroll 事件,第一次不会清楚定时器,只会改变istop 为false ,第二次,定时器会被清除,istop 还是为false , 同时滚动条不会再自动滚动了。除非你在click 一次回到顶部

0 回复 有任何疑惑可以回复我~

首先(!isTop)只有当isTop为false时,才会执行取消定时器的操作,如果后面不赋false就永远不能触发window.onscroll内的方法,所以需要赋给isTop false值。还有什么疑问可以继续补充~

0 回复 有任何疑惑可以回复我~

触发是他就变成false他就会取消定时器,进而就不会往上面滚动了



0 回复 有任何疑惑可以回复我~
#1

子非酸菜鱼

我也是这么理解的,就是被 false 一会儿 true 搞懵了
2016-07-30 回复 有任何疑惑可以回复我~

这一段,我也不是很明白,老师设置isTop=true 来判断的是“在点击返回顶部按钮后,定时器执行回到顶部命令的这期间,有没有人为的动作(鼠标有没有滚动滑轮),如果有就触发清除定时器的命令”这样回到顶部命令就被人为中断了。

逻辑我是这么理解的,但是代码中还是有点绕

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
回到顶部效果
  • 参与学习       44211    人
  • 解答问题       206    个

回到顶部网站不可缺少的一部分,用JS实现炫酷拉风的回到顶部效果

进入课程

滚动条滚动时触发是为啥要这个呢isTop=false;

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信