jQuery없이 scrollTop 효과 에뮬레이션

JS를 사용하여 scrollTop 효과를 에뮬레이션하려고했습니다. 여기에 제가 사용하고있는 코드가 있습니다. 이 코드는 다른 질문의 일부로 SO에 게시되었습니다. 이제 콘솔 로그는 또한이 일어날 나던 것을 보여 때 나는 element.scrollTop에 perTick를 추가하고 비록jQuery없이 scrollTop 효과 에뮬레이션

function scrollToTop(element, to, duration){ 
     if(duration<0) return; 
     var difference = to - element.scrollTop; 
     var perTick = difference/duration * 10; 
     console.log("Logging diff" +difference); 
     setTimeout(function(){ 
      console.log(perTick); 
      console.log("Log before scroll"+element.scrollTop); 
      element.scrollTop=(element.scrollTop + perTick); 
      console.log("Log after scroll"+element.scrollTop); 
      scrollToTop(element, to, duration-10); 
     }, 10); 
     }

. 내가 잘못 가고 어디

console.log("Log before scroll"+element.scrollTop);

및

console.log("Log after scroll"+element.scrollTop);

모두 0을 보이고있다 모르겠습니다. 도와주세요.

출처

2014-04-11 psyc0der

당신이 [jsfiddle]의 문제를 재현 할 수 (http://jsfiddle.net)? – Passerby

'element.scrollTo (x, y); 시도해보십시오. – rgthree

콘솔에서 출력 할 때'perTick'이 0보다 큰가요? 계산이 예상대로 작동합니까? – wongcode

다음은 다른 접근 방식입니다. 잘 작동하지만 질문이 있습니다. 더 많이하고 더 배우기를 바랍니다. 스크롤은 60ms의 지연으로 가장 매끄 럽습니다. 나는 이것이 18ticks/sec 시계와 관련이 있다고 생각한다. 코드가 주석 처리됩니다. 함수 "lerp"(선형 보간법)은 유용한 함수입니다 - 일부 언어는 고유합니다. (I은 의견을 충분히 포인트가 없습니다.)

[편집] Interesing 링크 : http://ejohn.org/blog/accuracy-of-javascript-time/

<html> 
<head> 
<style type="text/css"> 
#buttons { position:fixed; left:100px; top:10px; } 
#div1 { width:400px; height:100px; background:#eee; overflow:scroll; } 
</style> 
<script type="text/javascript"> 
function scrollto(elt, to, duration) { 
    if (duration < 0) return; 
    console.log(to + " | " + elt.scrollHeight); 
    if (to < 0 || to > elt.scrollHeight) return; 
    var fm = elt.scrollTop;   // begin 
    var time1 = new Date().getTime(); // begin 
    var time9 = time1 + duration  // end 
    scrollsub(elt, fm, to, time1, time9); 
    } 
function scrollsub(elt, fm, to, time1, time9) { 
    console.log(fm + " | " + to + " | " + time1 + " | " + time9); 
    var timenow = new Date().getTime(); 
    var k01 = (timenow - time1)/(time9 - time1); 
    var whither = lerp(k01, fm, to); 
    console.log(timenow + " | " + whither); 
    if (timenow < time9) { 
    elt.scrollTop = whither; 
    setTimeout(scrollsub, 60, elt, fm, to, time1, time9); } 
    else { elt.scrollTop = to; } // just finish 
    } 
function lerp(k01, k0, k1) { // linear interpolation 
    return k0 + (k1 - k0) * k01; 
    } 
function testgettime(time0, time) { 
    var timenow = new Date().getTime() - time0; 
    if (timenow != time) { 
    console.log(timenow/1000 + " | " + (timenow - time)/1000); } 
    if (timenow < 2000) { // don't go forever 
    setTimeout(testgettime, 1, time0, timenow); } 
    } 
</script> 
</head> 
<body> 
<div id="bodyid"> 
<div id="buttons"> 
    <button onclick="scrollto(getElementById('div1'), 150, 2000);">Scroll Down</button> 
    <button onclick="scrollto(getElementById('div1'), 000, 2000);">Scroll Up</button> 
    <button onclick="testgettime(new Date().getTime(), 0);">testgettime()</button> 
</div> 
x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br /> 
<div id="div1"> 
y1<br />y2<br />y3<br />y4<br />y5<br />y6<br />y7<br />y8<br />y9<br />10<br /> 
</div> 
x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br /> 
</div> 
</body> 
</html>

출처

2014-04-11 16:17:36 dcromley

jQuery없이 scrollTop 효과 에뮬레이션

답변

관련 문제