javascript - 如果重叠，则在窗口中重新定位 div

Question

我正在使用 jQuery 在我的页面上动态创建 div。如果鼠标点击位置在屏幕下方，则div会部分显示在屏幕外。基本上取屏幕 680px，鼠标在 600px 处单击，div 高度 300，div 的下部 220px 将超出屏幕，因为 overflow 属性设置为隐藏。

我想要实现的是一个函数，该函数将计算将其向上移动多少以确保 div 完全可见。

不幸的是，它不起作用。感谢任何帮助，甚至是通过 CSS 或其他方式的替代解决方案。

此函数应以 px 为单位返回值 top。基本上它应该计算 div 超出屏幕高度的多少，并将其从当前鼠标位置移除，以使 div 适合。

Javascript:

var mousex;
var mousey;
var currshowingid;
var mousepos;

$( document ).on( "mousemove", function( event ) {
    mousex = event.pageX;
    mousey = event.pageY;
    //console.log( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});

function xfromtop(el) {
    if ((mousey + $(el).height()) > $(window).height()) {
        fromtop = mousey - ((mousey + $(el).height()) - $(window).height())*1.1;
        fromtop = fromtop.toString() + "px";
    } else {
        fromtop = mousey.toString() + "px";
    }
    return fromtop;
}

这将创建 div 运行时并对 top CSS 属性使用 xfromtop()

function showdriverdetails(id) {
    $('div[id^="driver_"]').remove();
    // Add div and place in at mouse position 
    $("#main").append("<div class='driverdetails dets' id='driver_" + id + "'>");
    $("#driver_" + id).load("ajax/driver_info.php?id=" + id).fadeIn().draggable();
    $("#driver_" + id).css("top", xfromtop($("#driver_" + id)));
}

CSS:

div.driverdetails {
    width: 70%;
    height: auto;
    min-height: 300px;
    max-height: 400px;
    left: 18%;
}

.dets {
    z-index: 1000;
    position: fixed;
    padding: 2px;
    border: solid #5c6cb0 2.5px;
    background-color: white;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    display: none;
}

HTML:

<button onclick="showdriverdetails(100)">SHOW</button>

Answer 1

高度属性不考虑边距、填充和边框。您应该使用 jQuery 的 outerHeight 来获取您的 div 的完整高度。

function xfromtop(el) {
    var elHeight = $(el).outerHeight();
    var windowHeight = $(window).height();

    if ((mousey + elHeight) > windowHeight) {
        fromtop = windowHeight - elHeight;
        fromtop = fromtop.toString() + "px";
    } else {
        fromtop = mousey.toString() + "px";
    }
    return fromtop;
}