Question

我正在使用jQuery在一个函数中执行以下操作：

最初我有一个非常好的DIV定位; 我将DIV的内部HTML设置为一些所需的文本/ HTML; 然后我使用css（{top：initialTop，left：initialLeft}）在某些坐标处显示元素。

在页面的左侧和中间区域内一切正常 - 我在请求的坐标处看到带有左角的DIV。

当我想在页面右侧显示元素时，我必须保持DIV 100％可见，所以我必须在请求的坐标处显示其顶角（而不是在角落处）。我可以毫无问题地获得窗口宽度和滚动偏移量，我可以计算偏移量从DIV的topleft角减去以使其顶角 - 我只需取DIVs宽度并从坐标中减去它。

问题是 - 这种方法仅在我更改DIV的内容后第二次起作用。我第一次调用myDiv.width（）时，它保留了前一个值 - 带有旧文本的DIV的宽度。我第二次为同一个元素调用相同的函数，一切正常。

我听说有关延迟渲染的事情 - 这似乎发生在我的情况下;在函数退出之前，浏览器不会使用更新的文本呈现DIV，因此无法获得正确的宽度。

以下是简化代码：

// at the beginning I have the following style:
#myDiv
{
position: absolute;
top: 0;
left: 0;
}


function PutDivWithInPlace(text, x) {
    var $div = $('#myDiv');
    $div.html(text);

    $div.show(); // even if it worked, I would really like to keep myDiv invisible to avoid it jumping from the old position to the new one

    var width = $div.outerWidth();

    // I ignore x-scroll offset here for simplicity
    // if the right edge of div flows over the window right side, then push it to the left
    if (x + width > $(window).width()) {
        x -= width;
    }

    $div.css({
        left: x
    });

    // this does not work - the width is still from the previous call of PutDivWithInPlace, so myDiv appears at the wrong place :(
}

有没有其他方法可以获得DIV的右上角我需要它在同一个函数中我改变DIV的内容（但只有当DIV确实溢出窗口右侧）？除了使用DIVs宽度，即使在延迟渲染后也可以使用其他技巧吗？

Answer 1

我不确定你在问什么，但是不可能设置

left:auto;
right:someCoordinate;

无论宽度如何，我觉得应该把它放在右侧。

Answer 2

看来，我发现了一些奇怪的临时解决方案。 DIV宽度还取决于它将在浏览器窗口中显示的位置。我不明白，为什么相同文本的相同DIV在打开时为200px宽，比如x = 100，y = 200但是当我把它放到x = 800，y = 200时，它突然变成120px宽。浏览器似乎也考虑了元素的位置，虽然它允许溢出窗口，但它仍会自动缩小宽度。所以我的代码现在看起来像这样：

function PutDivWithInPlace(text, x)
{
var $div = $('#myDiv');
$div.html(text);

var width = $div.outerWidth();

// this is needed to recalc DIVs width because the browser has resized it depending on x
$div.css({ left: x});

// if the right edge of div flows over the window right side, then push it to the left
if(x + width > $(window).width()){      
    x -= width;
}

// and update css again with new style
$div.css({ left: x});
}

如果我调整浏览器窗口大小以使坐标位于边缘，这适用于测试用例 - 如果我将Div放在那些坐标处，我会得到宽度。当然有一个问题 - 如果宽度很大并且我将它推到左边，那么浏览器可能会决定再次调整DIV的大小，就像我在边缘上绘制之前一样。我希望这不会经常发生。仍然没有更好的解决方案:(

如何在浏览器窗口的右侧重新定位动态HTML元素？

2 个答案: