Question

我有一些内容<div>和可垂直滚动的<body>。

如果整个div目前在浏览器视口中可见，我不想做任何事情。

如果div部分可见并且只有上半部分可见，我希望向下滚动主体以显示整个div。

如果div部分可见且只有下半部分可见，我希望向上滚动主体以显示整个div。

如何使用jQuery执行此操作？

如何计算div是部分还是完全可见？
如果div部分可见，如何计算滚动方向和滚动量？

注意：忽略div的高度大于浏览器视口高度的情况。

Answer 1

如果没有看到您已经尝试过的代码，那么很难给出明确的答案。

您可以使用许多插件。我曾多次使用（和构建）jquery-visible并取得了巨大的成功。

如果从头开始编写更多东西，可以使用jQuery的.position()（link here）和.offset()（link here）来确定元素是否在页面上或者不是（您也可以使用与元素高度/宽度相结合的位置来查看它是否完全在屏幕上或在任何一点上都没有。）

这基本上就是jquery-visible插件所做的事情！

Answer 2

我是这样做的，可能是由许多其他人无数次完成的，但我找不到这样而且不那么难的片段。这就是为什么在这里问一个问题。

function smartBringToView(elem, margin) {
    // Get viewport data
    var body = $('html, body');
    var bodyY1 = $(body).scrollTop();
    var bodyY2 = bodyY1 + $(window).height();

    // Get element data
    var elemY1 = elem.offset().top - margin;
    var elemY2 = elem.offset().top + elem.height() + margin;

    // Perform scroll
    var deltaY1 = elemY1 - bodyY1;
    var deltaY2 = elemY2 - bodyY2;
    if (deltaY1 < 0) { // Upper part off screen
        body.animate({ scrollTop: bodyY1 + deltaY1 }, deltaY1 * 3);
        return;
    }
    if (deltaY2 > 0) { // Lower part off screen
        body.animate({ scrollTop: bodyY1 + deltaY2 }, deltaY2 * 3);
        return;
    }
}

jQuery滚动体来显示元素

2 个答案: