Прокрутка вниз на интервале, если пользователь прокручивается весь путь вниз

Question

у меня есть эта проблема,

Я создаю чат, который обновляется каждые 2 secounds, с помощью AJAX.

Теперь я хочу прокручивать донизу, каждый раз, когда он загружается, отлично работает.

Теперь проблема в том, что если они прокручиваются вверх, чтобы проверять старые сообщения, они будут прокручивать их вниз, досадно? Теперь я попытался придумать решение, которое imo должно работать. Но я так глуп. Может ли кто-нибудь мне помочь ?:

function loadChat() { 
    $.ajax({ 
     url: 'ajax/load_chat.php', 
     success: function(data) { 
      $('#chatbox').html(data); 
      //console.log($('#chatbox')[0].scrollHeight - $('#chatbox').innerHeight()); 
      //console.log($('#chatbox').scrollTop()); 
      if($('#chatbox')[0].scrollHeight - $('#chatbox').innerHeight() + 50 < $('#chatbox').scrollTop()) { 
       $("#chatbox").stop().animate({ scrollTop: $('#chatbox')[0].scrollHeight}, 200); 
      } 
     }, 
    }); 
} 

Этот код позволяет прокручивать вниз, несмотря ни на что, но инструкция if должна прекратить это ... правильно?

Answer 1

Я предлагаю установки флага следующим образом:

var atBottom = true; 
$('#chatbox').on('scroll', function() { 
    if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) { 
     atBottom = true; 
    } else { 
     atBottom = false; 
    } 
}); 

function loadChat() { 
    $.ajax({ 
     url: 'ajax/load_chat.php', 
     success: function(data) { 
      $('#chatbox').html(data); 
      //console.log($('#chatbox')[0].scrollHeight - $('#chatbox').innerHeight()); 
      //console.log($('#chatbox').scrollTop()); 
      if(atBottom) { 
       $("#chatbox").stop().animate({ scrollTop: $('#chatbox')[0].scrollHeight}, 200); 
      } 
     }, 
    }); 
} 

Таким образом, когда пользователь прокручивает вверх, флаг получает falsy и когда пользователь прокручивает на дно, он получает truthy.

Последний вопрос

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Смежные вопросы

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.