我正在开发一个网页代码，该代码从服务器动态获取内容，然后使用类似以下内容的内容将其放置到容器节点中

container.innerHTML = content;

有时我必须覆盖此节点中的某些先前内容。这样做很好，直到以前的内容占据了更多的垂直空间，然后又有一个新的空间占据了空间，并且用户向下滚动页面-滚动了超过新内容所允许的高度(如果提供了高度)。

在这种情况下，页面会错误地重绘-保留了旧内容的一些瑕疵。它可以正常工作，甚至可以通过最小化和还原浏览器(或者以其他方式强制重绘窗口)来消除伪像，但是，这似乎不太方便。

我仅在Safari(这是针对iPhone优化的网站)下进行测试。

有人知道如何处理吗？

解决方案

回答

听起来浏览器本身有问题。仅在一个浏览器中会发生此问题吗？

我们可以尝试的一件事是使用jQuery之类的轻量级库。它可以很好地处理浏览器差异。要为具有容器ID的div设置内部HTML，我们只需编写以下代码：

$('#container').html( content );

在大多数浏览器中都可以使用。我不知道它是否可以专门解决问题，但值得一试。

回答

在替换内容之前，将滚动位置设置回顶部(element.scrollTop = 0; element.scrollLeft = 0;靠心)是否可行？

回答

听起来Safari的Webkit呈现引擎最初并未识别出内容更改，至少不能完全识别出以前的html内容。最小化然后还原窗口会在浏览器的渲染引擎中启动重绘事件。

我想我将探索2种途径：首先我可以使用iframe代替当前的"内容"节点吗？浏览器期望IFrame会发生变化，但是，正如我们所看到的，它们并不总是擅长更改DIV或者其他元素的内容。

其次，也许可以通过修改滚动位置来实现。我们可以按照建议将滚动条简单地移回0，否则，如果内容过于繁琐，可以尝试在内容更改后恢复滚动条。从当前滚动位置减去旧内容节点的高度(将浏览器的滚动重置为内容节点的0)，更改节点内容，然后将新节点的高度添加到滚动位置。

尽管Palehorse是正确的(目前我还没有任何意见，但我无法将他的答案投赞成票)，像jQuery，Dojo或者Prototype这样的抽象库通常可以帮助解决这些问题。尤其是如果我们看到页面/站点已经超越了简单的DOM操作，我们会发现库提供的工具和增强功能将为我们带来巨大的帮助。

回答

每次更新innerHTML时，将元素的CSS高度设置为"自动"。

回答

我会尝试做container.innerHTML =''; container.innerHTML =内容；

回答

我发现最简单的解决方案是将锚标记<a>放置在要编辑的div的顶部：

<a name="ajax-div"></a>

然后，当我们更改div的内容时，我们可以执行以下操作以使浏览器跳转至锚标记：

location.hash = 'ajax-div';

使用此方法可确保在更新内容时用户不会向下滚动太远，并且一开始就不会遇到问题。

(在最新的FF测试版和最新的野生动物园中进行了测试)