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

Question

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

首先，我有一个绝对定位的DIV； 我设置DIV的内部HTML为所需的文本/HTML； 然后，我使用css({top: initialTop,left: initialLeft})在某些特定坐标处显示元素。

在页面的左侧和中心区域内，一切正常 - 我可以看到以请求的坐标为左上角的DIV。

当我想要在页面的右侧显示元素时，我必须保持DIV 100％可见，因此我必须在请求的坐标处显示其右上角（而不是左上角）。 我可以轻松获取窗口宽度和滚动偏移量，并计算要从DIV的左上角减去的偏移量，以使其右上角 - 我只需取DIV的宽度并将其从坐标中减去。

问题是 - 这种方法仅在更改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超出窗口右侧时）？也许除了使用DIV宽度来使其正确显示之外，还有其他诀窍可以延迟渲染后实现。

- JustAMartin

---

你能在这里发布你的代码吗？这样我们就可以审核它了。 - Alpesh

确实，我们需要看到您正在使用的代码。 - Moses

Answer 1

我不确定您具体在询问什么，但是不能设置吗？

left:auto;
right:someCoordinate;

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

- dave

---

只有一个问题：如果它超出了窗口的右侧，我需要将其定位到右上角。如果右上角没有超出窗口，那么我应该保持左上角的坐标。 - JustAMartin

Answer 2

看起来，我找到了一些奇怪的临时解决方案。 DIV 的宽度也取决于它即将出现在浏览器窗口中的位置。我不明白为什么同样的 DIV 和相同的文本，在 x=100，y=200 时宽度为 200px，但当我把它放到 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的大小，就像在我将其绘制在边缘之前所做的那样。希望这种情况不会经常发生。仍然没有更好的解决办法 :(

- JustAMartin