网页边界值

Question

我将鼠标悬停在某些链接上出现一个“盒子”弹出窗口。 框高约300像素，框的顶部与链接位置处于同一水平，但是其中一些链接位于页面的最低可滚动部分，因此弹出窗口将被剪切掉。

问题哪些值用于检测页面底部或到底部的可滚动距离，以便您可以根据需要移动弹出窗口？

我使用的是jQuery，但是也欢迎使用通用的JavaScript解决方案作为参考。

谢谢。

Answer 1

基本上，您想找到相对于文档的视口底部，然后将其与传入事件的坐标进行比较。

function handler(event) {
    var bottomOfViewport = $(window).scrollTop() + $(window).height();
    var bottomOfBox = event.pageY + HEIGHT_OF_BOX;
    if ( bottomOfViewport < bottomOfBox )
        // code to handle overflow condition
}

幸运的是，pageX和pageY属性是相对于文档的。 x轴的情况与此类似。