JQuery scroll() 너무 느림

Question

다이어그램에 표시된대로 4 개의 Div가있는 다음 HTML 디자인이 있습니다.

-------------------------- 
fixedHead | scrollHead 
-------------------------- 
fixedBody | scrollBody 
-------------------------- 

내 요구 사항은 내가 scrollBody을 스크롤 할 때

1. 수평 scrollHead 수평 를 이동해야한다는 것입니다.
2. scrollBody를 수직으로 fixedBody로 스크롤 할 때 이 수직으로 이동해야합니다.

나는 아래의 코드를 수행하여이를 달성 할 수 있어요하지만 테이블이 약 100 열과 100 행 매우 큰 경우이이

을 달성하기 위해 다른 빠른 방법이 있나요

매우 느려집니다

$('.scrollBody').scroll(function() { 
    $('.fixedBody').scrollTop($(this).scrollTop()); 
    $(".scrollHead").scrollLeft($(this).scrollLeft()); 
}); 

Answer 1

내가 제대로 이해한다면,이 애니메이션을해야 지난 100 MS :

var duration = 100; 
$('.scrollBody').scroll(function() 
    $('.fixedBody').animate({ scrollTop: $(this).scrollTop() }, duration); 
    $(".scrollHead").animate({ scrollLeft: $(this).scrollLeft() }, duration); 
}); 

Answer 2

문제는 scroll 이벤트가 매우 자주 (초당 수십 번) 발생할 수 있으며, 브라우저는 종종 엄격하게 필요한 것보다 더 자주 요소의 위치를 ​​변경하게됩니다.

이런 종류의 문제에 대한 일반적인 솔루션은 '조절'이다

는 위의 예제는 벤 독일어의 jQuery throttle/debounce plugin를 사용하고, 기본적으로 기능마다 100 밀리 초 이상 실행되지 않음을 의미합니다

$('.scrollBody').scroll($.throttle(100, function() { 
    $('.fixedBody').scrollTop($(this).scrollTop()); 
    $(".scrollHead").scrollLeft($(this).scrollLeft()); 
})); 

- 당신은 행복 응답 매체를 찾으려고 그 그림을 바꿀 수 있습니다.

Answer 3

scrollLeft 및 scrollTop을 수정하는 대신 3D 변형 오프셋을 사용하여 잠금을 방지하고 재배치시 페인팅 시간을 절약하기 위해 requestAnimationFrame (사용자 지정 스로틀 링)을 활용할 수 있습니다.

필자가 작성한 코드는 jsFiddle 또는 jsBin (조금 걱정할 만 함)과 잘 작동하지 않지만 로컬에서 잘 작동합니다. 테이블의 크기는 상당히 크지 만 매우 복잡한 DOM은 포함되지 않으므로 (각 요소에는 텍스트 노드 만 포함됨) 성능이 잘못 될 수 있습니다. 이것은 당신 (Gist)에 대한 작동하는 경우 다음과 같이

... 흐름 작동

를 참조하십시오

• 바인딩 (즉시 실행이 아닌) 애니메이션 프레임을 요청하는 함수에 테이블 신체의 scroll 이벤트 우리가 이미 요청을 기다리지 않는 한. 애니메이션 프레임을 요청하면 브라우저가 즉시 다시 작동하도록 강요하는 대신 리 페인트가 올 때 실행되며, 다른 코드를 차단하지 않습니다.
• 애니메이션 프레임을 사용할 수있게되면 각 축의 오프셋을 확인하여 마지막 시간 이후로 변경되었는지 확인하십시오. 있는 경우 오프셋을 해당 축의 음수 변환 값으로 적용하십시오. 레이아웃 CSS를 다시 계산할 필요가 없으므로 변형은 페인트 시간에 대한 스크롤 오프셋보다 낫습니다. DOM 요소의 기존 렌더링을 이동하기 만합니다. 일부 시스템에서는 모든 페인팅을 별도의 스레드 (GPU)로 오프셋 할 수 있기 때문에 3D 변환이 훨씬 뛰어나기 때문에 메인 CPU 프로세스를 더 많이 확보 할 수 있습니다.

코드의 핵심 요소는 다음과 같습니다 : 저속으로

var $scrollBody = $('.scrollBody'); 
var $fixedBody = $('.fixedBody'); 
var $scrollHead = $('.scrollHead'); 

void function persistScrollState(){ 
    var previousOffset = { 
     x : 0, 
     y : 0 
    }; 
    var pendingScroll = false; 

    function persistScroll(){ 
     var offset = { 
      x: -$scrollBody.scrollLeft(), 
      y: -$scrollBody.scrollTop() 
     }; 

     if(offset.x !== previousOffset.x){ 
      $scrollHead.css({ transform : 'translateX(' + offset.x + 'px) translateZ(0px)' }); 
     } 
     if(offset.y !== previousOffset.y){ 
      $fixedBody.css( { transform : 'translateY(' + offset.y + 'px) translateZ(0px)' }); 
     } 

     previousOffset = offset; 
     pendingScroll = false; 
    } 

    $scrollBody.on('scroll', function handleScroll() {  
     // requestAnimationFrame to avoid resource hogging: 
     // https://gist.github.com/paulirish/1579671 
     // Use polyfill for non-supporting browsers: 
     // https://gist.github.com/paulirish/1579671 

     if(!pendingScroll){ 
      pendingScroll = requestAnimationFrame(persistScroll); 
     } 
    }); 
}();