javascript - 检测元素在屏幕上的百分比

Question

我正在尝试检测在当前窗口中可以看到多少百分比的元素。

例如，如果用户只能看到一半元素，则返回 50。如果用户可以看到整个元素，则返回 100。

到目前为止，这是我的代码:

function getPercentOnScreen() {
    var $window = $(window),
        viewport_top = $window.scrollTop(),
        viewport_height = $window.height(),
        viewport_bottom = viewport_top + viewport_height,
        $elem = $(this),
        top = $elem.offset().top,
        height = $elem.height(),
        bottom = top + height;

    return (bottom - viewport_top) / height * 100;
}

但是好像不行。任何人都可以帮助我实现这一目标我似乎在旋转齿轮。

Answer 1

您想要获得的是元素超出视口(viewport)顶部和底部的像素数量。然后您可以从总高度中减去它并除以该高度以获得屏幕上的百分比。

var px_below = Math.max(bottom - viewport_bottom, 0);
var px_above = Math.max(viewport_top - top, 0);
var percent = (height - px_below - px_above) / height;
return percent;

需要注意的是 jQuery 的高度方法不包括填充。你可能想为此使用 .outerHeight。