Question

我正在尝试创建一个主要依赖于css的小工具提示脚本。我无法弄清楚的一点是如何基于它与浏览器边缘的距离来定位div。

当div出现时，我希望检查它与顶部，底部，左侧和右侧的接近程度。例如，如果没有足够的空间在工具提示链接上方显示div，则应将其放置在链接下方。

基本上我希望div能够“了解”它的位置并知道去哪里确保它是可见的。

由于

Answer 1

我必须自己编写非常相似的代码，以便与tipsy一起使用（所以我的解决方案使用jQuery）。这是基本数学，假设<div id="mydiv">...</div>是您正在使用的div。在测量到右边缘和底边缘的距离时，我考虑了div的高度和宽度。

dTop，dBottom，dLeft和dRight分别是div的顶部，底部，左侧和右侧边缘到同一边缘的距离视口。如果您想根据div的左上角进行衡量，请在计算dTop和dLeft时减去dBottom或dRight。

var $doc = $(document),
    $win = $(window),
    $this = $('#mydiv'),
    offset = $this.offset(),
    dTop = offset.top - $doc.scrollTop(),
    dBottom = $win.height() - dTop - $this.height(),
    dLeft = offset.left - $doc.scrollLeft(),
    dRight = $win.width() - dLeft - $this.width();

Answer 2

请参阅Measuring Element Dimension and Location获取帮助

Answer 3

cheat sheet的这个Prototype library就是一个很好的例子。

根据距离浏览器边缘定位div（javascript）

3 个答案: