自动滚动的工作方式不同

时间：2016-04-22 21:47:10

标签： javascript jquery html css

我遇到了自动滚动到底部的问题。它以不同的速度工作，我需要它以正常速度工作，它在某些区域匆忙，在其他区域减速。你看到了这个bug吗？这在Google Chrome中非常明显，但您也可以使用计时器进行检查。

$(document).ready(
  function(){
        $("#stop").click(function () {
            $("#play").css({
			"opacity":"0.25",
			"pointer-events":"auto",
			"cursor":"pointer"
			});
			$("#stop").css({
			"opacity":"1",
			"pointer-events":"none"
			});
    		$("html, body").stop();
        });	
        $("#play").click(function () {
			var scrolli= $(document).height()- $(window).height()
            $("#stop").css({
			"opacity":"0.25",
			"pointer-events":"auto",
			"cursor":"pointer"
			});
			$("#play").css({
			"opacity":"1",
			"pointer-events":"none"
			});
		 	$("html, body").animate({ scrollTop: scrolli },180000);
        });			
    })
#dalealplay{
position:fixed; top:30px; color:white; font-size:12px; right:50px; line-height:5px; z-index:200; background:black; text-align:center; padding:5px;
}
#play{
opacity:0.25;
cursor:pointer;
}
#stop{
cursor:auto;
pointer-events:none;
}
.metro{
width:100px;
text-align:right;
color:red;
height:100px;
background:rgba(0,255,201,0.10);
z-index:0;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dalealplay">
<span id="play">PLAY</span>/<span id="stop">STOP</span>
</div>

<div  class="metro">
_0
</div>
<div  class="metro">
_100
</div>
<div  class="metro">
_200
</div>
<div  class="metro">
_300
</div>
<div  class="metro">
_400
</div>
<div  class="metro">
_500
</div>
<div  class="metro">
_600
</div>
<div  class="metro">
_700
</div>
<div  class="metro">
_800
</div>
<div  class="metro">
_900
</div>
<div  class="metro">
_1000
</div>
<div  class="metro">
_100
</div>
<div  class="metro">
_200
</div>
<div  class="metro">
_300
</div>
<div  class="metro">
_400
</div>
<div  class="metro">
_500
</div>
<div  class="metro">
_600
</div>
<div  class="metro">
_700
</div>
<div  class="metro">
_800
</div>
<div  class="metro">
_900
</div>
<div  class="metro">
_1000
</div>
<div  class="metro">
_100
</div>
<div  class="metro">
_200
</div>
<div  class="metro">
_300
</div>
<div  class="metro">
_400
</div>
<div  class="metro">
_500
</div>
<div  class="metro">
_600
</div>
<div  class="metro">
_700
</div>
<div  class="metro">
_800
</div>
<div  class="metro">
_900
</div>
<div  class="metro">
_1000
</div>
<div  class="metro">
_100
</div>
<div  class="metro">
_200
</div>
<div  class="metro">
_300
</div>
<div  class="metro">
_400
</div>
<div  class="metro">
_500
</div>
<div  class="metro">
_600
</div>
<div  class="metro">
_700
</div>
<div  class="metro">
_800
</div>
<div  class="metro">
_900
</div>
<div  class="metro">
_1000
</div>
<div  class="metro">
_100
</div>
<div  class="metro">
_200
</div>
<div  class="metro">
_300
</div>
<div  class="metro">
_400
</div>
<div  class="metro">
_500
</div>
<div  class="metro">
_600
</div>
<div  class="metro">
_700
</div>
<div  class="metro">
_800
</div>
<div  class="metro">
_900
</div>
<div  class="metro">
_1000
</div>
<div  class="metro">
_100
</div>
<div  class="metro">
_200
</div>
<div  class="metro">
_300
</div>
<div  class="metro">
_400
</div>
<div  class="metro">
_500
</div>
<div  class="metro">
_600
</div>
<div  class="metro">
_700
</div>
<div  class="metro">
_800
</div>
<div  class="metro">
_900
</div>
<div  class="metro">
_1000
</div>
<div  class="metro">
_100
</div>
<div  class="metro">
_200
</div>
<div  class="metro">
_300
</div>
<div  class="metro">
_400
</div>
<div  class="metro">
_500
</div>
<div  class="metro">
_600
</div>
<div  class="metro">
_700
</div>
<div  class="metro">
_800
</div>
<div  class="metro">
_900
</div>
<div  class="metro">
_1000
</div>
<div  class="metro">
_100
</div>
<div  class="metro">
_200
</div>
<div  class="metro">
_300
</div>
<div  class="metro">
_400
</div>
<div  class="metro">
_500
</div>
<div  class="metro">
_600
</div>
<div  class="metro">
_700
</div>
<div  class="metro">
_800
</div>
<div  class="metro">
_900
</div>
<div  class="metro">
_1000
</div>
<div  class="metro">
_100
</div>
<div  class="metro">
_200
</div>
<div  class="metro">
_300
</div>
<div  class="metro">
_400
</div>
<div  class="metro">
_500
</div>
<div  class="metro">
_600
</div>
<div  class="metro">
_700
</div>
<div  class="metro">
_800
</div>
<div  class="metro">
_900
</div>
<div  class="metro">
_1000
</div>
<div  class="metro">
_100
</div>
<div  class="metro">
_200
</div>
<div  class="metro">
_300
</div>
<div  class="metro">
_400
</div>
<div  class="metro">
_500
</div>
<div  class="metro">
_600
</div>
<div  class="metro">
_700
</div>
<div  class="metro">
_800
</div>
<div  class="metro">
_900
</div>
<div  class="metro">
_1000
</div>
<div  class="metro">
_100
</div>
<div  class="metro">
_200
</div>
<div  class="metro">
_300
</div>
<div  class="metro">
_400
</div>
<div  class="metro">
_500
</div>
<div  class="metro">
_600
</div>
<div  class="metro">
_700
</div>
<div  class="metro">
_800
</div>
<div  class="metro">
_900
</div>
<div  class="metro">
_1000
</div>
<div  class="metro">
_100
</div>
<div  class="metro">
_200
</div>
<div  class="metro">
_300
</div>
<div  class="metro">
_400
</div>
<div  class="metro">
_500
</div>
<div  class="metro">
_600
</div>
<div  class="metro">
_700
</div>
<div  class="metro">
_800
</div>
<div  class="metro">
_900
</div>
<div  class="metro">
_1000
</div>
<div  class="metro">
_100
</div>
<div  class="metro">
_200
</div>
<div  class="metro">
_300
</div>
<div  class="metro">
_400
</div>
<div  class="metro">
_500
</div>
<div  class="metro">
_600
</div>
<div  class="metro">
_700
</div>
<div  class="metro">
_800
</div>
<div  class="metro">
_900
</div>
<div  class="metro">
_1000
</div>
<div  class="metro">
_100
</div>
<div  class="metro">
_200
</div>
<div  class="metro">
_300
</div>
<div  class="metro">
_400
</div>
<div  class="metro">
_500
</div>
<div  class="metro">
_600
</div>
<div  class="metro">
_700
</div>
<div  class="metro">
_800
</div>
<div  class="metro">
_900
</div>
<div  class="metro">
_1000
</div>
<div  class="metro">
_100
</div>
<div  class="metro">
_200
</div>
<div  class="metro">
_300
</div>
<div  class="metro">
_400
</div>
<div  class="metro">
_500
</div>
<div  class="metro">
_600
</div>
<div  class="metro">
_700
</div>
<div  class="metro">
_800
</div>
<div  class="metro">
_900
</div>
<div  class="metro">
_1000
</div>
<div  class="metro">
_100
</div>
<div  class="metro">
_200
</div>
<div  class="metro">
_300
</div>
<div  class="metro">
_400
</div>
<div  class="metro">
_500
</div>
<div  class="metro">
_600
</div>
<div  class="metro">
_700
</div>
<div  class="metro">
_800
</div>
<div  class="metro">
_900
</div>
<div  class="metro">
_1000
</div>
<div  class="metro">
_100
</div>
<div  class="metro">
_200
</div>
<div  class="metro">
_300
</div>
<div  class="metro">
_400
</div>
<div  class="metro">
_500
</div>
<div  class="metro">
_600
</div>
<div  class="metro">
_700
</div>
<div  class="metro">
_800
</div>
<div  class="metro">
_900
</div>
<div  class="metro">
_1000
</div>
<div  class="metro">
_100
</div>
<div  class="metro">
_200
</div>
<div  class="metro">
_300
</div>
<div  class="metro">
_400
</div>
<div  class="metro">
_500
</div>
<div  class="metro">
_600
</div>
<div  class="metro">
_700
</div>
<div  class="metro">
_800
</div>
<div  class="metro">
_900
</div>
<div  class="metro">
_1000
</div>
<div  class="metro">
_100
</div>
<div  class="metro">
_200
</div>
<div  class="metro">
_300
</div>
<div  class="metro">
_400
</div>
<div  class="metro">
_500
</div>
<div  class="metro">
_600
</div>
<div  class="metro">
_700
</div>
<div  class="metro">
_800
</div>
<div  class="metro">
_900
</div>
<div  class="metro">
_1000
</div>

1 个答案:

答案 0 :(得分：0)

默认的jquery .animate函数使用一个名为＆＃39; swing＆＃39;的缓动函数。开始有点慢，获得速度，然后结束更慢。听起来你喜欢使用线性缓动函数。

尝试：

$("html, body").animate({ scrollTop: scrolli },180000, 'linear');

http://api.jquery.com/animate/

相关问题
最新问题