JQuery滾動（）太慢

我有如下圖所示的4 Div的HTML設計。JQuery滾動（）太慢

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

我的要求是，

當我滾動scrollBody水平scrollHead要水平移動。
當我滾動scrollBody垂直fixedBody應該垂直移動。

我可以做下面的代碼來實現這一點，但如果表是圍繞非常大的100列和100列這變得很慢

是否有任何其他更快的方法來實現這一

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

來源

2014-01-06 Jeenson Ephraim

慢，你的意思是它的時間太長，以評估這體現在哪裏？多久時間？另外，你能否提供一個例子（例如用JSFiddle）？我很難想象... –

@CedricReichenbach我的假設是，實際的滾動速度太慢。 –

你的意思是動畫？ –

如果我理解正確的話，這應該使動畫最後100毫秒：

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

來源

2014-01-06 15:47:31

因此，滾動動畫會比動畫更快，沒有動畫？ – adeneo

不，但更流暢......：P但是我想我誤解了你，我以爲你在與一些默認動畫戰鬥。 –

我認爲這實際上更有可能使它變慢：使用jQuery動畫，DOM只會被修改更多次數 - 我認爲這是性能瓶頸。 – Barney

問題在於scroll事件經常發生 - 每秒幾十次 - 而且瀏覽器通常最終會重新定位元素的次數超過絕對必要的次數。

一個共同的解決方案，這樣的問題是「節流」：

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

上面的例子使用本Alman的jQuery throttle/debounce plugin，基本上意味着該功能將不執行比每100毫秒以上 - 你可以改變這個數字來嘗試找到一個快樂的響應媒體。

來源

2014-01-06 15:51:46 Barney

我的確認爲我看到了一些改進，我正在玩弄這個數字，但仍然滾動似乎有點緩慢，並在時間停滯 –

這可能是更好的溝渠手動節流，以支持更近期的發展。 [我已經提出了一個新的解決方案]（http://stackoverflow.com/questions/20953439/jquery-scroll-too-slow/21050741#21050741），它使用'requestAnimationFrame'和CSS3'transform'來緩解主要的壓力線。 – Barney

您可以利用（含自定義的限制），以防止鎖定，並通過3D轉換偏移，而不是通過修改scrollLeft和scrollTop節省時間繪畫與重新定位。

我寫的代碼與jsFiddle或jsBin（這有點令人擔心）並不能很好地發揮作用，但本地工作正常。該表的大小相當大，但不包含非常複雜的DOM（每個元素只包含文本節點），因此其表現可能不是指示性的。

看看這對你的作品（Gist）...

的流程如下：

綁定表身的scroll事件，其中將要求一個動畫幀（而不是立即執行）的功能，除非我們已經在等待一個請求。請求動畫幀意味着代碼將在瀏覽器重新繪製時執行，而不是強制它立即執行，這意味着它不會阻止任何其他代碼。
當動畫幀變爲可用時，檢查每個軸的偏移量以查看它是否自上次更改。如果有，則將偏移量作爲該軸上的負平移值應用。由於不需要重新計算任何佈局CSS，所以變換比繪製時間的滾動偏移更好：它只是移動DOM元素的現有渲染。 3D翻譯甚至更好，因爲在某些系統上，它可以將所有繪畫偏移到單獨的線程（GPU），從而更加釋放主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); 
     } 
    }); 
}();

來源

2014-01-10 17:34:05 Barney

感謝Barney ..抱歉，我無法登錄並檢查您的回覆。原因是相同的代碼對於IE10來說非常快，並且客戶已經認識到只能使用IE10。但我會毫不猶豫地嘗試你的解決方案，並會更新你。再次感謝您花費時間和精力 –

JQuery滾動（）太慢

回答

相關問題