Javascript 仅当显示的div实际处于可见屏幕之外时才滚动

在我的应用程序中，我在单击按钮时显示和隐藏div。因此，用户单击“未来日历”按钮，按钮下方将显示他们的未来日历。这些按钮是表格的一部分（实际上是一组按网格排列的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));

};

这将返回true或false

我试图做的是，仅当相关项目在屏幕上不可见时，才使用此选项有条件地滚动窗口。问题是，即使项目的一小部分显示在屏幕上，也会被视为出现在屏幕上。我如何调整

$.fn.isOnScreen代码

，使其认为我的“关闭”项目实际上不在屏幕上？换句话说，我需要在一些值中添加一些东西，使边界项看起来好像它们实际上在屏幕外，这样我就可以调用滚动

我已经包含了一个JSFIDLE，它显示了上面的代码似乎总是认为屏幕上有东西，只要它是DOM的一部分就可以看到

更新：

---

此应用程序使用Angular.js显示相关表格。通过一些测试，我发现bounds.bottom始终是121，无论我在屏幕上单击什么位置。这一定与Angular.js如何使用ng repeat布局屏幕有关。知道如何克服这个问题吗？

尝试向边界区域添加一些额外的像素？这里我不理解的是，正如我的JSFIDLE所示，div显然是不可见的，但代码返回一个true

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