Предотвратить сброс прокрутки в AJAX - PullRequest
2 голосов
/ 09 марта 2012

У меня есть контейнер div, содержимое которого модифицируется каждые 3 секунды с помощью функции javascript.Функция первоначально вызывается событием onload тега body.

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 секунды.Единственная проблема заключается в том, что позиция прокрутки сбрасывается, и, следовательно, моя страница возвращается к началу.Это сильно влияет на удобство использования.

Может кто-нибудь предложить решение?

Ответы [ 5 ]

3 голосов
/ 27 ноября 2012

Я француз, так что прости меня за мой плохой английский

У меня было то же самое на моей странице: когда я нажал на ссылку, запрос XHR сбросил мой свиток на полную вершину.Я нашел свою ошибку ... очень глупую ... Проверьте свой HTML, если ваш "onClick" находится в теге <a>, проверьте, что вы не написали <a href="#" onClick="myFunction()"> ... Это была моя ошибка,и просто <a onClick="myFunction()"> не перезагружать свиток х)

Надеюсь, я вам помог

3 голосов
/ 09 марта 2012

Вы можете использовать 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
}
2 голосов
/ 09 марта 2012

Перед настройкой innerHTML вы можете получить свойство scrollTop элемента txtHint.Затем, после добавления текста, снова установите для этой переменной значение scrollTop.

if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
    var scroll = document.body.scrollTop;
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    document.body.scrollTop = scroll;
 }
1 голос
/ 20 августа 2013

Не уверен, что на этот вопрос был дан полный ответ.

У меня была та же проблема, попытка всех решений, описанных выше, не решила ее.Я обнаружил, что при обновлении 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

1 голос
/ 23 ноября 2012

попробуйте добавить

return false;

в конце запроса ajax

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...