javascript - 在滚动时淡化多个 div

Question

我有一个可滚动的页面，其中包含很多divs. 当用户滚动时，我想要页面的元素fade out；所以只有当前位于中心的 div才会有100%。topbottomviewportopacity

我目前通过观察window.scroll事件并根据每个 divopacity相对于scroll offsets. 这可行，但对客户端性能有巨大影响（特别是当有很多 div 时） - 这会导致“非流畅”滚动体验。

是否有其他可用的方法？甚至可能是一个无需遍历每个 div 的解决方案？

---

编辑：

1. 我在jsFiddle上设置了一个快速预览，它说明了我当前的方法（未优化）
2. 感谢您的评论！我真的很喜欢使用 abackground gradient来伪造元素不透明度的想法 - 但在我的情况下，这不起作用，因为我有一个background image.

Answer 1

jsFiddle 上的示例

// 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);
        });
});