Javascript 如何强制定位的元素保持在可视浏览器区域内？

我有一个脚本，可以将“popup”元素插入DOM。它设置它们的

top

和

left

css属性（相对于单击事件上的鼠标坐标）。除了这些“弹出”元素的高度是可变的，并且其中一些元素超出了浏览器窗口的可视区域之外，它工作得非常好。我想避免这种情况

这是我到目前为止所拥有的

<script type="text/javascript">
    $(function () {
        $("area").click(function (e) {
            e.preventDefault();

            var offset = $(this).offset();
            var relativeX = e.pageX - offset.left;
            var relativeY = e.pageY - offset.top;

            // 'responseText' is the "popup" HTML fragment
            $.get($(this).attr("href"), function (responseText) {
                $(responseText).css({
                    top: relativeY,
                    left: relativeX
                }).appendTo("#territories");

                // Need to be able to determine
                // viewable area width and height
                // so that I can check if the "popup" 
                // extends beyond.

                $(".popup .close").click(function () {
                    $(this).closest(".popup").remove();
                });
            });
        });
    });
</script>

$（函数（）{
$（“区域”）。单击（功能（e）{
e、 预防默认值（）；
var offset=$（this.offset（）；
var relativeX=e.pageX-offset.left；
var relativeY=e.pageY-offset.top；
//“responseText”是“弹出”HTML片段
$.get（$（this.attr（“href”），函数（responseText）{
$（responseText）.css({
上图：相对论，
左：relativeX
}).附于（“领土”）；
//需要能够确定
//可视区域宽度和高度
//这样我就可以检查“弹出窗口”
//超越。
$（“.popup.close”）。单击（函数（）{
$（this）.closed（“.popup”）.remove（）；
});
});
});
});

您可以将窗口的宽度/高度与窗口的scrollTop、scrollLeft等进行比较

以下是一些方法供您查看：

$(window).width()
$(window).height()
$(window).scrollTop()
$(window).scrollLeft()
$(window).scrollWidth()
$(window).scrollHeight()

看看关于这些方法的jQuery文档。根据您想要的行为，您需要将弹出窗口的宽度和位置与窗口的当前可见区域（由滚动尺寸确定）进行比较

---

。。等等，我想出了一个解决办法。我在原始问题中添加了以下代码来代替我的4行注释

var diffY = (popup.offset().top + popup.outerHeight(true)) - $(window).height();
if (diffY > 0) {
  popup.css({ top: relativeY - diffY });
}

var diffX = (popup.offset().left + popup.outerWidth(true)) - $(window).width();
if (diffX > 0) {
  popup.css({ left: relativeX - diffX });
}

---

@liquidleaf为我指明了正确的方向，所以+1，谢谢你。

我喜欢这张图片，你想如何修复它？把它改短些？让它简单地用作边界？翻转另一个方向？基本上我只是想“尝试”强制弹出元素的所有外部边缘位于可见区域内。例如如果其中一个弹出窗口的底部边缘超出可见区域50px，我想将其移动到顶部-50px。使用jQuery方法可能比使用常规Javascript属性（如pageX等）更可取，因为这些值取决于浏览器支持。没有scrollWidth（）或scrollHeight（）jQuery中的方法。因此，这并没有起到多大的作用。已接受的答案已删除。