jquery使用animate滚动滚动条不能动怎么办?
js或者jquery里面使用animate滚动滚动条之后,滚动条就好像被锁定一样,不能动了,怎么办?有没有解决办法,第二次出现这个问题了<html><head><meta...
js或者jquery里面使用animate滚动滚动条之后,滚动条就好像被锁定一样,不能动了,怎么办?有没有解决办法,第二次出现这个问题了
<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,function(){
stop(true,true);
});
}
if(top > nowHeight + 2 && top < (nowHeight * 2)){
ht.animate({"scrollTop":nowHeight *2},1000);
}
})
})
</script>
</body>
</html> 展开
<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,function(){
stop(true,true);
});
}
if(top > nowHeight + 2 && top < (nowHeight * 2)){
ht.animate({"scrollTop":nowHeight *2},1000);
}
})
})
</script>
</body>
</html> 展开
1个回答
展开全部
//你犯了一个超低级的错误,停止动画的时候出错了
if(top > 2 && top <nowHeight){
//设置滚动条高度为第一屏高度
ht.animate({"scrollTop":nowHeight},1000,function(){
ht.stop(true,true);
//修改这里就行了
});
}
参考这里:http://www.w3school.com.cn/jquery/jquery_stop.asp
使用jquery必须注意:jquery的事件、方法等等,都是建立在jquery对象的基础上的,也就是你调用任何的jquery事件或方法都必须$()以后才能使用。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询