問題（凍結）、視差サイトにスクロール-X上

Question

を色を変更するときに、私は、水平視差サイトを持っている、それが正常に動作しますが、私はそのようなスクロールの背景色を変更追加するとき：

var tennis = $('.tennis'); 
var tennisDivs = {}; 
var tennisColors = {}; 
$.each(tennis, function (index, value) { 
    var color = $(value).data('color'); 
    var name = $(value).data('name'); 
    var left = $(this).offset().left; 
    if ($(value).data('name')) 
     tennisDivs[name] = left; 
     tennisColors[left] = color; 
}); 
var scrollArea = $('#tennis-container .slides'); 
var tempPosition = 'Info'; 
scrollArea.scroll(function() { 
    var position = Math.floor($('#tennis-container .slides').scrollLeft()); 
    $.each(tennisDivs, function (index, value) { 
     if ((value - 2300) <= position) { 
      currIndex = index; 
     } 
    }); 
    if (tempPosition != currIndex) { 
       tempPosition = currIndex; 
       $('.slide__bg').attr('class','slide__bg').addClass('color-' + tempPosition); 

      } 
}); 

CSS：HTML

.slide__bg { 
    transition: background-color 0.8s linear 0.3s; 
} 

.color-info, .color-stars,.basic-color { 
    background-color: #bdc1c6; 
} 

.color-courts { 
    background-color: #75695f; 
} 

：

<div id="tennis-container"> 
      <div class="slides"> 
       <div class="slide tennis-info info" id="tennis-info" data-name="Info" data-color="yellow"> 
        <div class="slide__bg"></div> 
        <div class="slide__content"></div> 
       </div> 



      <div class="slide ...." id="..." data-name="..." data-color="..."> 
       <div class="slide__bg"></div> 
       <div class="slide__content"></div> 
      </div> 
      <div class="slide ...." id="..." data-name="..." data-color="..."> 
       <div class="slide__bg"></div> 
       <div class="slide__content"></div> 
      </div> 

      </div> 
</div> 

問題は、スクロールの際に色の変化で、サイトが開始ここに見られるように、数秒のための停止を凍結し、スクロール：

また、私はjQueryのanimate()を使用して背景色を変更してみたが、何も変わりません。以下のような

修正：大きな画像をリサイズ

1. 避けてください。
2. 背景サイズのCSSプロパティを削除します。

これは、すべてのパフォーマンスの問題についてです...私のため

Answer 1

を作業しないでください。私はあなたのコードの一部についていくつかの最適化を行ってきました。これを試してみてください：

var scrollArea = $('#tennis-container .slides'); 
var tempPosition = 'Info'; 
var slideBg = $('.slide__bg'); 
scrollArea.scroll(function() { 
    var position = Math.floor(scrollArea.scrollLeft()); 
    $.each(tennisDivs, function (index, value) { 
     if ((value - 2300) <= position) { 
      currIndex = index; 
     } 
    }); 
    slideBg.attr('class','slide__bg').addClass('color-' + tempPosition); 
});