我正在尝试创建一个主要依赖于 css 的小工具提示脚本。我无法弄清楚的一点是如何根据 div 到浏览器边缘的距离来定位 div。
当 div 出现时,我希望它检查它与顶部、底部、左侧和右侧的距离。例如,如果没有足够的空间来显示工具提示链接上方的 div,则应将其放置在链接下方。
基本上我希望 div 能够“意识到”它的位置并知道去哪里以确保它可见。
谢谢
最佳答案
我只需要自己编写非常相似的代码,用于 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();
关于javascript - 位置 div 取决于距离浏览器边缘(javascript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/503992/