스크롤 할 때 부드러운 스크롤

Question

원활하게 스크롤되는이 JavaScript 코드 (PasteBin, Fiddle)가 있습니다. 그냥 완벽하게 작동하지만 한 가지 더 필요합니다.

var EPPZScrollTo = 
{ 
    /** 
    * Helpers. 
    */ 
    documentVerticalScrollPosition: function() 
    { 
     if (self.pageYOffset) return self.pageYOffset; // Firefox, Chrome, Opera, Safari. 
     if (document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop; // Internet Explorer 6 (standards mode). 
     if (document.body.scrollTop) return document.body.scrollTop; // Internet Explorer 6, 7 and 8. 
     return 0; // None of the above. 
    }, 

    viewportHeight: function() 
    { return (document.compatMode === "CSS1Compat") ? document.documentElement.clientHeight : document.body.clientHeight; }, 

    documentHeight: function() 
    { return (document.height !== undefined) ? document.height : document.body.offsetHeight; }, 

    documentMaximumScrollPosition: function() 
    { return this.documentHeight() - this.viewportHeight(); }, 

    elementVerticalClientPositionById: function(id) 
    { 
     var element = document.getElementById(id); 
     var rectangle = element.getBoundingClientRect(); 
     return rectangle.top; 
    }, 

    /** 
    * Animation tick. 
    */ 
    scrollVerticalTickToPosition: function(currentPosition, targetPosition) 
    { 
     var filter = 0.1; 
     var fps = 60; 
     var difference = parseFloat(targetPosition) - parseFloat(currentPosition); 

     // Snap, then stop if arrived. 
     var arrived = (Math.abs(difference) <= 0.5); 
     if (arrived) 
     { 
      // Apply target. 
      scrollTo(0.0, targetPosition); 
      return; 
     } 

     // Filtered position. 
     currentPosition = (parseFloat(currentPosition) * (1.0 - filter)) + (parseFloat(targetPosition) * filter); 

     // Apply target. 
     scrollTo(0.0, Math.round(currentPosition)); 

     // Schedule next tick. 
     setTimeout("EPPZScrollTo.scrollVerticalTickToPosition("+currentPosition+", "+targetPosition+")", (2000/fps)); 
    }, 

    /** 
    * For public use. 
    * 
    * @param id The id of the element to scroll to. 
    * @param padding Top padding to apply above element. 
    */ 
    scrollVerticalToElementById: function(id, padding) 
    { 
     var element = document.getElementById(id); 
     if (element == null) 
     { 
      console.warn('Cannot find element with id \''+id+'\'.'); 
      return; 
     } 

     var targetPosition = this.documentVerticalScrollPosition() + this.elementVerticalClientPositionById(id) - padding; 
     var currentPosition = this.documentVerticalScrollPosition(); 

     // Clamp. 
     var maximumScrollPosition = this.documentMaximumScrollPosition(); 
     if (targetPosition > maximumScrollPosition) targetPosition = maximumScrollPosition; 

     // Start animation. 
     this.scrollVerticalTickToPosition(currentPosition, targetPosition); 
    } 
}; 

스크롤 할 때 자동 스크롤을 중지하고 싶습니다. 지금 당장은 자동 스크롤과 동시에 스크롤 할 때 엉망이됩니다.

Answer 1

사용자가 스크롤을 시작했는지 추적하는 데 사용하는 추가 변수를 추가하십시오.

var user_is_scrolling = false; 

사용자가 스크롤 시작되지 않은 경우에만 그런 다음 스크롤 예약 :

이

if(!user_is_scrolling){ 
    setTimeout("EPPZScrollTo.scrollVerticalTickToPosition("+currentPosition+", "+targetPosition+")", (2000/fps)); 
} 

그런 다음 창을 추적 스크롤 이벤트

var scroll_timeout; 
window.onscroll = function(e) { 

    //clear the timeout if it happens to exist 
    clearTimeout(scroll_timeout); 


    //set scrolling to true 
    user_is_scrolling = true; 

    //set timeout for setting user_is_scrolling to false 250ms after 
    //user has actually stopped scrolling 
    scroll_timeout = setTimeout(function(){ 
     user_is_scrolling = false; 
    }, 250);  
} 

바이올린 : http://jsfiddle.net/UT8H6/4/