滚动时淡化多个div

Question

我有一个包含大量divs的可滚动页面。我希望fade out在用户滚动时页面的top和bottom处的元素;因此，只有当前位于viewport中心的div才会有opacity 100％。

我目前通过观察window.scroll事件并按照与opacity相关的位置计算每个div scroll offsets来实现此目的。这有效，但对客户的表现有很大的影响（特别是当有很多div时） - 这会带来“非流畅”的滚动体验。

是否有其他方法可用？也许甚至没有经过每一个div的解决方案？

---

编辑：

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

Answer 1

Example on 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);
        });
});