根据距离浏览器边缘定位div(javascript)

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

请参阅测量元素尺寸和位置以获取帮助