javascript - 如何知道元素是否在屏幕上可见。如果没有，请滚动页面

Question

我正在尝试构建一个类似 here 的弹出窗口. 在这种情况下，当我单击 CUSTOMISE 按钮时，按钮下方会出现一个窗口。如果该元素在屏幕上不完全可见，则向下或向上滚动页面直到它完全可见。

我能达到一半的结果:

$('body').on('click',"#"+ID,function () {

        var $this = $(this);

        $('#attr-div-'+baseId).css({
            top: $this.position().top+55,
        }).show();
    });

如何滚动页面直到元素完全可见？ 谢谢!

Answer 1

像这样的事情应该可行，但对更大的想法进行 fiddle 会有所帮助:

$('body').on('click', "#"+ID, function() {

    var popup = $('#attr-div-'+baseId);
    var offset = $(this).offset().top+55;

    popup.css('top', offset).show();
    $(window).scrollTop(offset+popup.height()-$(this).height());
});

假设它没有固定位置 - 如果它在窗口下方，则您必须重新定位它。

它可以被改进(当然也可以是动画而不是瞬时的):

http://codepen.io/anon/pen/dPBNWY?editors=001