Question

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

我能够达到一半的结果：

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

        var $this = $(this);

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

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

Answer 1

这样的事情应该有用，但是更大的想法的小提琴会有所帮助：

$('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

Answer 2

我找到了解决方案：

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

        var $this = $(this);

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

        $('html, body').animate({
            scrollTop: $('#attr-div-'+baseId).offset().top-55
        }, 1000);
    });

这不是我想要的，但它允许我让弹出窗口始终可见。

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

2 个答案: