当前位置：文江博客话题详情

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

发布于 2024-07-13 06:02:35 字数 227 浏览 8 评论 0原文

我正在尝试创建一个主要依赖于 css 的小工具提示脚本。我不明白的 JavaScript 部分是如何根据 div 到浏览器边缘的距离来定位它。

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

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

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猫性小仙女 2024-07-20 06:02:35

我只需要自己编写非常相似的代码，与 tipsy 一起使用（所以我的解决方案使用 jQuery ）。这是基本的数学计算，假设

...

是您正在使用的 div。在测量到右边缘和下边缘的距离时，我也会考虑 div 的高度和宽度。

dTop、dBottom、dLeft 和 dRight 是距 div 顶部、底部、左侧和右侧的距离边缘，分别到视口的同一边缘。如果要根据div的左上角进行测量，在计算dBottom和时不要减去dTop或dLeft >d对。

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();

I just had to write very similar code myself, for use with tipsy (so my solution uses jQuery). Here's the basic math, assuming <div id="mydiv">...</div> is the div you're working with. I account for the div's height and width when measuring the distances to the right and bottom edges as well.

dTop, dBottom, dLeft, and dRight are the distance from the div's top, bottom, left, and right edges, respectively, to the same edge of the viewport. If you want to measure based on the upper-left corner of the div, don't subtract dTop or dLeft when computing dBottom and 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();

回复收藏 0 原文