javascript - 如何保持滚动位置独立于回发？

Question

我在 javascript 中有一个定期的时间间隔事件，它单击一个 asp 按钮。该应用程序是一个普通的聊天室，我必须刷新 GridView (位于面板内)以检查是否有新聊天。但是每次单击按钮并刷新 gridview 时，面板都会向上滚动到顶部(即 scrollTop 值变为 0)。我已经试过了，但无济于事:-

    <script type="text/javascript">
    function refresh() {
        setInterval(function () {
            var xtop = document.getElementById("Panel1").scrollTop;
            document.getElementById("Button2").click();
            document.getElementById("Panel1").scrollTop = xtop;
        }, 1000);
    }
    </script>

Answer 1

如果你想存储回发之间的滚动位置，在你的refresh()功能，您可以将滚动位置值存储在您放置在 HTML 某处的隐藏字段中:<input type="hidden" id="scroll"></input>使用 JavaScript

document.getElementById("scroll").value = document.getElementById("Panel1").scrollTop;

还有其他选项可以持久保存数据，例如 cookie 和 ASP.NET ViewState，但隐藏字段对于此目的来说是最简单的。然后，您可以在加载 DOM 并将窗口滚动到该位置时从隐藏字段中读取该值。

但是，如果您每秒钟都回发消息以检查新消息，您可能会遇到更大的问题。这种功能最好用 AJAX 异步完成。它需要一些调查，因为我不确定您在这里的实现，但基本上您将使用 JavaScript 询问服务器是否有新消息并从服务器异步加载它们，从而消除回发的使用。

Here is Mozilla's introduction to AJAX.