如何强制定位元素保持可见的浏览器区域？

我有一个插入“弹出”元素到DOM的脚本。它在点击事件中设置它们相对于鼠标坐标的top和left css属性。除了这些“弹出”元素的高度是可变的，它们中的一些超出了浏览器窗口的可视区域之外，它的效果很好。我想避免这一点。如何强制定位元素保持可见的浏览器区域？

alt text

这里是我到目前为止

<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>

来源

2010-06-10 jessegavin

喜欢这幅画 - 你想如何修复它？把它缩短一点？把它简单地用作边界？翻转另一个方向？ – 2010-06-10 18:20:44

基本上我只想'尝试'强制弹出元素的所有外边缘在可见区域内。例如。如果其中一个弹出窗口的底部边缘超出可见区域50px，我想将其移动到顶部-50px。 – jessegavin 2010-06-10 21:09:01

我想出了一个解决方案。我在原来的问题中在我的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和感谢。

来源

2010-06-10 21:12:46 jessegavin

你会窗口宽度/高度比较窗口的scrollTop的，scrollLeft等

这里有一些方法你看看：

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

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

http://api.jquery.com/scrollTop/ ..等

来源

2010-06-10 18:23:56 liquidleaf

使用jQuery方法可能比使用普通的Javascript属性（如pageX等）更理想 - 因为这些值因浏览器支持而异。 – liquidleaf 2010-06-10 18:25:21

jQuery中没有scrollWidth（）或scrollHeight（）方法。因此，这并不是最有用的。已接受的答案已删除。 – jessegavin 2010-06-10 19:33:01

如何强制定位元素保持可见的浏览器区域？

回答

相关问题