javascript - 位置 div 取决于距离浏览器边缘(javascript)

Question

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

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

基本上我希望 div 能够“意识到”它的位置并知道去哪里以确保它可见。

谢谢

Answer 1

我只需要自己编写非常相似的代码，用于 tipsy (所以我的解决方案使用 jQuery)。这是基本数学，假设 <div id="mydiv">...</div>是您正在使用的 div。在测量到右边缘和底部边缘的距离时，我也会考虑 div 的高度和宽度。

dTop , dBottom , dLeft , 和 dRight分别是 div 的上边缘、下边缘、左边缘和右边缘到视口(viewport)同一边缘的距离。如果要根据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();