javascript - 如何在不移动原始位置的情况下在另一个元素之前插入一个html元素

Question

我希望能够插入一个用户可以导航(向左)的元素，而不会影响用户当前看到的内容。也就是说，新元素将被插入屏幕外的左侧，但当前“聚焦”的元素(以及其他可见元素)不应被视为移动。 目前我正在使用 insertbefore 执行此操作，测量新元素的 clientWidth 并从容器元素的边距中减去它。但是，获取 clientWidth 的成本很高，而且当我添加过渡时，这种方法被证明是有问题的。有没有更聪明的方法来做到这一点？我原以为这是一个相当普遍的问题 - 在不移动其他所有元素的情况下在另一个元素之前插入一个元素。

Answer 1

您可以使用一些 CSS 来实现此目的。插入一个没有高度但overflow: visible的包装div，在这个div里面插入你想要的元素:

.wrapper {
    height: 0;
    overflow: visible;
}

.wrapper div {
    margin-left: 100%;
}