防止AJAX中的滚动重置

Prevent scroll reset in AJAX

本文关键字：滚动 AJAX 防止      更新时间：2023-09-26

我有一个div容器，它每3秒通过javascript函数修改一次内容。函数最初由body标记的onload事件调用。

function showNow(){
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp=new XMLHttpRequest();
    } else { // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
        }
   };
   xmlhttp.open("GET", "tab.php", true);
   xmlhttp.send();
   setTimeout(showNow, 3000);
}

内容每3秒刷新一次。唯一的问题是滚动位置正在重置，因此我的页面会跳回到开头。这严重影响了可用性。

有人能提出解决方案吗？

我是法国人，请原谅我的英语不好

我的页面上也有同样的东西：当我点击链接时，XHR请求将我的滚动重新设置为完全顶部。我发现了我的错误。。。一个非常愚蠢的。。。检查你的HTML，如果你的"onClick"在<a>标签中，检查你是否没有写<a href="#" onClick="myFunction()">。。。那是我的错误，只是<a onClick="myFunction()">没有重置滚动x）

希望我帮过你

您可以使用window.scrollTo(x, y)来设置滚动的位置，例如：

if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
   document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
   window.scrollTo(0, 0); //stay on the top
}

在设置innerHTML之前，您可以获取txtHint元素的scrollTop属性。然后，添加文本后，再次将该变量设置为scrollTop。

if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
    var scroll = document.body.scrollTop;
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    document.body.scrollTop = scroll;
 }

尝试添加

return false;

在ajax请求结束时

不确定是否已完全回答。

我也遇到了同样的问题，尝试上面的所有解决方案都没有解决。我发现刷新innerHTML实际上会使滚动条在很短的时间内消失（因为随着内容的刷新，整个页面的高度会变小很多），随后，当内容再次出现（以及滚动条）时，浏览器无法知道他在通话前在哪里，因此一直向上滚动。

我自己的解决方案非常简单，不涉及捕捉事件等。。。。，我添加了一个列，我用spacer.gif填充了我想要刷新的div的高度。这样，整个页面布局本身就不会真正失真，滚动条也不会在短时间内消失。

<table width="30%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>
    <img src="/images/spacer.gif" width="0" height="170"/>   <-- adding the extra column to keep the height always the same.
    </td>
    <td>
      <div id="content">
        <script>loadnewusermenu()</script> <-- content getting refreshed
      </div>
    </td>
  </tr>
</table>

希望它有意义。DjYoy

相关文章：