猿问

为什么jquery利用animate滚动scrollTop之后被锁定就滚动不了了?

求帮忙解答,谢谢!

<html>
<head>
<meta charset="utf-8">
<script src="j.js"></script>
<style>
* {
	padding:0;
	margin:0;
	border:0;
}
.one,.two,.three {
	display:block;
}
.one {
	width:1px;
	height:1px;
	background-color:#f00;
}
.tow {
	background-color:#00f;
}
.three {
	background-color:#cecece;
}
</style>
</head>
<body>
<!-- jquery自写滚动屏幕 -->
<div class="one">one</div>
<div class="two">two</div>
<div class="three"></div>
<script>
	$(document).ready(function(){
	
	//获取当前文档的宽 高
		nowWidth = $(window).width();
		nowHeight = $(window).height();
		//获取大的背景div
		one = $(".one");
		two = $(".two");
		three = $(".three");
		<!-- alert(typeof(nowHeight)); -->
		//开始设置宽度高度为当前屏幕高度
		
		one.css({"height":nowHeight,"width":nowWidth});
		two.css({"height":nowHeight,"width":nowWidth});
		three.css({"height":nowHeight,"width":nowWidth});
		
		//开始监听滚动栏
		//准备获取文档
		var ht = $("document,html,body");
		$(document).scroll(function(){
			//获取当前滚动条距离文档高度
			var top = $(document).scrollTop();
			//如果高度 > 1  移动到第二屏 针对第一屏
			if(top > 2 && top < nowHeight){
				//设置滚动条高度为第一屏高度
				ht.animate({"scrollTop":nowHeight},1000);
			}
			if(top > nowHeight + 2 && top < (nowHeight * 2)){
				ht.animate({"scrollTop":nowHeight *2},1000);
			}
		})
		
	})
		
	
</script>
</body>
</html>


admop
浏览 3559回答 2
2回答

林逸舟丶

对你代码做了补分修改:<script> $(document).ready(function(){       //获取当前文档的宽 高     nowWidth = $(window).width();     nowHeight = $(window).height();     //获取大的背景div     one = $(".one");     two = $(".two");     three = $(".three");     //开始设置宽度高度为当前屏幕高度              one.css({"height":nowHeight,"width":nowWidth});     two.css({"height":nowHeight,"width":nowWidth});     three.css({"height":nowHeight,"width":nowWidth});           //打印nowHeight     console.log(nowHeight);     // 获取body,用以获取滚动条高度scrollTop     var ht = $("body");     // 立个flag让函数只执行一次     var flag=true;       // 开始监听滚动栏     $(document).scroll(function(){         //获取当前滚动条距离文档高度         var top = $(document).scrollTop();         //如果高度 > .div1的1/5高度  自动移动到第二屏         if(top > nowHeight/5 && top < nowHeight && flag)         {          ht.animate({"scrollTop":nowHeight},1000,function(){console.log($(document).scrollTop());});          flag=false;         }                  if(top > (nowHeight+nowHeight/5) && top < (nowHeight * 2) && flag)      {          ht.animate({"scrollTop":nowHeight *2},1000);          flag=false;         }                 })         })      </script>这段代码运行后,滚动条不会卡住。所以答案即是:“所谓的滚动条卡住”,是因为你每次重新滚动时,再一次触发了源代码中:if(top > 2 && top < nowHeight){这个条件,所以会重新移动,造成“卡住”的现象。

MarlboroKay

因为你的判断条件有问题:第二个if 里面同时满足第一个条件,当然一直停留在第一个if里的状态了
随时随地看视频慕课网APP

相关分类

JQuery
我要回答