javascript - 在滚动条上淡化多个 div

Question

我得到了一个包含很多 div 的可滚动页面。我想在用户滚动时淡出页面顶部和底部的元素；所以只有当前位于 viewport 中心的 div 才会有 100% 的 opacity。

我目前通过观察 window.scroll 事件并根据它们相对于 scroll offsets 的位置计算每个 div opacity 来实现这一点.这可行，但对客户端性能有巨大影响(特别是当有很多 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);
        });
});