自動スクロールは別のもので動作します

私は下から下への自動スクロールに問題があります。さまざまな速度で動作しており、通常の速度で動作する必要があります。一部の地域で急速に動作し、他の領域では減速します。あなたはバグを見ますか？ Google Chromeでもかなりわかりますが、クロノメーターを使って確認することもできます。自動スクロールは別のもので動作します

$(document).ready(
 
    function(){ 
 
     $("#stop").click(function() { 
 
      $("#play").css({ 
 
\t \t \t "opacity":"0.25", 
 
\t \t \t "pointer-events":"auto", 
 
\t \t \t "cursor":"pointer" 
 
\t \t \t }); 
 
\t \t \t $("#stop").css({ 
 
\t \t \t "opacity":"1", 
 
\t \t \t "pointer-events":"none" 
 
\t \t \t }); 
 
    \t \t $("html, body").stop(); 
 
     }); \t 
 
     $("#play").click(function() { 
 
\t \t \t var scrolli= $(document).height()- $(window).height() 
 
      $("#stop").css({ 
 
\t \t \t "opacity":"0.25", 
 
\t \t \t "pointer-events":"auto", 
 
\t \t \t "cursor":"pointer" 
 
\t \t \t }); 
 
\t \t \t $("#play").css({ 
 
\t \t \t "opacity":"1", 
 
\t \t \t "pointer-events":"none" 
 
\t \t \t }); 
 
\t \t \t $("html, body").animate({ scrollTop: scrolli },180000); 
 
     }); \t \t \t 
 
    })

#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>

出典

2016-04-22 Arturo García

デフォルトのjqueryの.animate機能は、ゆっくりと利益のスピードを少しアウトを開始し、その後、よりゆっくりと終了「スイング」と呼ばれるイージング関数を使用しています。リニアイージング機能を使用するように思えます。

試してみてください。

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

出典

2016-04-22 21:51:45

これは完璧です！あなたは最高です！ –

自動スクロールは別のもので動作します

答えて

関連する問題