Javascript 卷轴上多个div的淡入淡出

我得到了一个可滚动的页面，其中包含许多

div

。当用户滚动时，我想淡出页面顶部和底部的元素；因此，只有当前位于

视口中心的div将具有100%的
不透明度


目前，我通过观察
窗口。滚动
事件并根据每个div相对于
滚动偏移量的位置计算它们的
不透明度
来实现这一点。这是可行的，但会对客户端性能产生巨大影响（特别是在有很多div的情况下）——这会带来“非流体”的滚动体验

还有其他方法吗？甚至可能是一个解决方案，而不是通过每一个div


编辑：
我在上设置了一个快速预览，它演示了我当前的方法（未优化）
谢谢你的评论！我真的很喜欢使用
背景渐变
来伪造元素不透明度的想法-但在我的情况下，这不会起作用，因为我得到了
背景图像

//http://stackoverflow.com/a/488073/340760
函数IsCrolledinToView（elem）
{
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
返回（（elemBottom=docViewTop））；
}
//当您滚动div时
$（“.list”）.滚动（函数（e）{
var$list=$（此项）；
//仅将逻辑应用于可见元素
$list.find（“div”）
.过滤器（功能（i、d）{
返回IsCrolledinToView（d）；
})
.each（函数（{
var eTop=$（this）.offset（）.top；
var center=$list.height（）/2；
//如果元素位于中心，则为100%
//否则它会褪色
var dif=中心-eTop；
如果（dif<0）dif*=-1；
var pc=1-（dif/中心）；
//设置元素的不透明度
$（this.css（“不透明度”，pc）；
});
});
您的代码会有所帮助。我不确定是否有更好的方法。听起来我也会这么做。我认为性能问题不在于查看每个div，而在于客户端的图形芯片组一直在努力重新绘制页面。你可以做的一件事是使用渐变背景，而不是更改div上的透明度。这样，当它们滚动时，背景会使它们看起来消失。请确保仅对浏览器实际视口中的div执行计算。感谢各位，我用一个示例更新了问题
// http://stackoverflow.com/a/488073/340760
function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

// when you scroll the div
$(".list").scroll(function(e) {
    var $list = $(this);

    // apply logic only to visible elements
    $list.find("div")
        .filter(function(i, d) {
            return isScrolledIntoView(d);
        })
        .each(function() {
            var eTop = $(this).offset().top;
            var center = $list.height() / 2;

            // if the element is in the center it is 100%
            // otherwise it will fade
            var dif = center - eTop;
            if (dif < 0) dif *= -1;

            var pc = 1 - (dif / center);

            // set the opacity for the elements
            $(this).css("opacity", pc);
        });
});