javascript - FPS(卡住)问题，在视差站点中更改 scroll-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:

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

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

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

html:

<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. 移除 background-size 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);
});