Question

我有一个div容器，它通过javascript函数每隔3秒修改一次内容。该函数最初由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秒刷新一次。唯一的问题是滚动位置正在重置，因此我的页面跳回到开头。这极大地影响了可用性。

有人可以建议一个解决方案吗？

Answer 1

您可以使用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
}

Answer 2

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

我的页面上有同样的事情：当我点击链接时，XHR请求重置了我的滚动条。我发现了自己的错误......非常愚蠢...... 检查您的HTML，如果您的“onClick”位于<a>标记中，请检查您是否写过<a href="#" onClick="myFunction()"> ... 那是我的错，只是<a onClick="myFunction()">不重置滚动x）

希望我帮助过你

Answer 3

在设置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;
 }

Answer 4

尝试添加

return false;

在ajax请求结束时

Answer 5

不确定这是否已完全回答。

我有同样的问题，尝试上面的所有解决方案都没有解决它。我发现刷新innerHTML实际上使Scrollbar在很短的时间内消失（因为整个页面在内容刷新时变得非常小），随后当内容重新出现时（和滚动条）浏览器具有无法知道他在电话会议前的位置，因此一直向上滚动。

我自己的解决方案非常简单，并且不涉及捕捉事件等...，我添加了一个列，我填充了spacer.gif我打算刷新的div的高度。这样整个页面布局本身实际上从未被扭曲，Scrollbar即使在很短的时间内也不会消失。

<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

在AJAX中防止滚动重置

5 个答案: