Question

在我的应用程序中，我在单击按钮时显示并隐藏div。因此，用户点击＆＃34;未来日历＆＃34;按钮和按钮下方将是他们未来的日历。这些按钮是表格的一部分（实际上是一组排列为网格的div），当点击底部附近的按钮时，未来的日历将显示在浏览器窗口的可见区域下方，并显示浏览器滚动条。我通过使用：

解决了这个问题

$(document.body).animate({
    'scrollTop': $(targetDiv).offset().top
}, 500);

这很有效，只是当我点击列表中的顶部项目时，它也会滚动（当它真的应该显示时，因为它会立即在屏幕上显示）。

我已经实现了以下代码，我在本网站回答的类似问题中找到了这些代码：

$.fn.isOnScreen = function () {

    var win = $(window);

    var viewport = {
        top: win.scrollTop(),
        left: win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();
    //alert('top-' + viewport.top + ' bottom-' + viewport.bottom);

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

};

这可以通过以下方式调用：

$('.myelement').isOnScreen();

返回true或false。

我想要做的是只有在屏幕上看不到有问题的项目时才使用它来有条件地滚动窗口。问题是，即使屏幕上显示项目的TINY部分，也会被视为ON SCREEN。如何调整$.fn.isOnScreen code，以便它认为我的＆＃34;关闭＆＃34;物品实际上是在屏幕外？换句话说，我需要在某些值上添加一些东西，以使边框项看起来好像它们实际上在屏幕外，所以我可以调用滚动。

我已经包含了一个JSFiddle，它显示上面的代码似乎总是认为某些东西在屏幕上并且可见，只要它是DOM的一部分。 http://jsfiddle.net/mikemahony/wjzrc1z3/

更新

此应用程序使用Angular.js显示有问题的表。通过一些测试，我发现无论我点击屏幕的哪个位置，bounds.bottom始终为121。这必须与Angular.js如何使用ng-repeat布局屏幕有关。知道如何克服这个问题吗？

只有当显示div实际上离开可见的场景时才滚动

0 个答案: