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()更改背景颜色，但没有任何变化。

修复如：

避免调整大图像的大小;
删除背景大小的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);
});

当在视差站点中改变scroll-x上的颜色时FPS（冻结）的问题

1 个答案: