javascript - 如果元素将落在屏幕之外，则尝试翻转输出

Question

var $elem = elem;
var position = $elem.position();
var output = {};
var winX = $(window).height();
var winY = $(window).width();

output.width = $elem.width();
output.height = $elem.height();
output.bottomLeftX = position.left;//left top
output.bottomLeftY = position.top + output.height;//left bottom
output.bottomRightX = position.left + output.width;//right top
output.bottomRightY = position.top + output.height;//right bottom


if(position.left > 0 && position.top > 0 && position.left+output.width < winY && position.top+output.height < winX)
{
    //something
}
else
{
    alert('not gonna fit')
}

return output;

无论我尝试哪种方式，我似乎都无法做到正确，上面是我来这里尝试寻求帮助之前的最后一次尝试。我想做的是获取 DOM 中元素的位置，并根据其位置最终显示另一个元素。有点像工具提示，但在几个方面有所不同。反正。我正在尝试弄清楚如果需要的话如何翻转我的输出，以防将要显示的元素将离开屏幕，即使它会离开屏幕，我也想从不同的方向显示它。 .

当前触发显示隐藏元素的元素。该元素的左上角边缘是否接触触发元素的左下边缘。如果它会离开屏幕，例如触发元素位于页面底部附近和右侧，我希望该元素将显示对齐，其右下边缘接触触发器的右上边缘元素。或者，如果触发元素位于页面的左下角，我希望它与触发元素的左上边缘对齐。本质上，我需要覆盖查找边缘并将元素保留在窗口中的基础。目前显示的元素宽度为 200 像素 x 550 像素，我不确定这是否会满足上面代码中的整体需求。

有什么好的方法可以解决这个问题，而无需想出十几个逻辑来说明，嘿，这将从窗口/视口(viewport)的任何一个边缘掉落，我们需要重新定位它。匹配

Answer 1

好吧，在没有来自这里的帮助的情况下，经过多次尝试和头痛，我想出了一个适合我的解决方案。我最终将上面的内容放入其自己的函数中，以衡量正在传递的内容的某些方面，然后我创建了一个函数来测量正在显示的元素并获取其在屏幕上的位置。部分问题在于，由于它被动态添加到 dom，然后样式设置为 display:none，因此脚本无法确定它的放置位置、内容或方式，直到它被放置为止。 body 上的表现。因此，在显示元素后，我会在其上运行第二个函数，以便在需要时根据需要移动它。

function tippedOffElemPosition(elem)
{
    var $elem = elem;
    var $msg_elem = $elem.next('.tippedOff_msg');
    var position = $elem.position();
    var offset = $elem.offset();

    var output = {};
    var win_height = $(window).height();
    var win_width = $(window).width();

    output.win_height = win_height;
    output.win_width = win_width;
    //hover trigger
    output.elem_width = $elem.width();
    output.elem_height = $elem.height();
    output.elem_left_top = position.left;//left top
    output.elem_left_bottom = position.top + output.elem_height;//left bottom
    output.elem_right_top = position.left + output.elem_width;//right top
    output.elem_right_bottom = position.top + output.elem_height;//right bottom
    output.elem_offset_left = offset.left;
    output.elem_offset_top = offset.top;
    //final position (default)
    output.setting_top = output.elem_left_bottom;
    output.setting_left = output.elem_left_top;

/*
    debugStr = '';
    debugStr += 'ref = '+$elem.data('ref')+'<br>';
    debugStr += 'win_height = '+win_height+'<br>';
    debugStr += 'win_width = '+win_width+'<br>';
    debugStr += 'output.elem_width = '+output.elem_width+'<br>';
    debugStr += 'output.elem_height = '+output.elem_height+'<br>';
    debugStr += 'output.elem_left_top = '+output.elem_left_top+'<br>';
    debugStr += 'output.elem_left_bottom = '+output.elem_left_bottom+'<br>';
    debugStr += 'output.elem_right_top = '+output.elem_right_top+'<br>';
    debugStr += 'output.elem_right_bottom = '+output.elem_right_bottom+'<br>';
    debugStr += 'output.elem_offset_left = '+output.elem_offset_left+'<br>';
    debugStr += 'output.elem_offset_top = '+output.elem_offset_top+'<br>';
    debugStr += 'output.setting_top = '+output.setting_top+'<br>';
    debugStr += 'output.setting_left = '+output.setting_left+'<br><br>';
    $('#debug').html(debugStr);
*/

    return output;
}
function tippedOffMsgElemPos(msg_elem, elPos)
{
    $msg_elem = msg_elem;
    var msg_position = $msg_elem.position();
    var msg_offset = $msg_elem.offset();
    var msg_width = $msg_elem.width();
    var msg_height = $msg_elem.height();
    var msg_right_side = msg_offset.left + msg_width;
    var msg_bottom = msg_offset.top + msg_height;
    //$('#debug').append('<br><br>msg_right_side = '+msg_right_side+'<br>msg_bottom = '+msg_bottom+'<br>elPos.elem_right_top ='+elPos.elem_right_top);

    var final_top = elPos.setting_top;
    var final_left = elPos.setting_left;

    if(msg_right_side > elPos.win_width)
    {
        final_left = elPos.setting_left-(msg_width-elPos.elem_width);
    }
    if(msg_bottom > elPos.win_height)
    {
        final_top = elPos.elem_offset_top-(msg_bottom+elPos.elem_height);
    }
    //$('#debug').append('<br>final_left = '+final_left);
    $msg_elem.css({"top":final_top, "left":final_left}).show();
}

是我的最终结果..总而言之，我正在尝试为jquery制作一个工具提示插件，我可以根据我的需要进行定制，并且当您第一次开始时不一定需要在元素中硬编码消息。我希望在不久的将来得到的最终结果会更加精致，但这对我来说目前已经足够了。