Проверьте, находится ли пользователь внизу div

#javascript #jquery

Вопрос:

На моем веб-сайте есть div чата в реальном времени, и я добавил этот код для запуска с интервалом 1000 мс, чтобы пользователь оставался в нижней части чата, даже когда приходят новые сообщения:

$("#chat-body").scrollTop($("#chat-body")[0].scrollHeight);

Однако проблема в том, что таким образом пользователь не может прокручивать вверх, потому что в конце секунды это все равно приведет пользователя к нижней части #chat-body . Я хочу, чтобы он проверял, находится ли пользователь уже внизу #chat-body (т. Е. не прокручивается вверх), прежде чем переводить его на дно, когда приходит новое сообщение.

Как я могу это сделать? Спасибо.

1. Можно ли добавить этот код при добавлении сообщения? Например, пользователь может свободно прокручивать вверх или вниз, но при появлении нового сообщения выполняется этот код, и новое сообщение сразу же отображается? Кажется, что было бы излишним запускать это каждые 1 секунду. С таким кодом один только этот комментарий инициировал бы прокрутку div 10 раз, прежде чем я его опубликовал.

2. Лично, если бы я, как пользователь, просматривал старые сообщения, а чат был вынужден перейти в нижнюю часть, потому что пришло новое сообщение, когда я пытался прочитать старые сообщения, я был бы в высшей степени раздражен. Моя свобода читать старые сообщения на этом этапе была отнята.

3. Согласен с Taplar, если пользователь прокручивает страницу вверх, он ищет конкретное сообщение для ссылки. Было бы неожиданно затем внезапно переместиться на дно. Не стал бы этого делать..

4. @War10ck Но это все равно приводит пользователя к нижней части страницы, когда он получает новое сообщение, даже если он не хочет спускаться и хочет просмотреть предыдущие чаты.

5. @taplar Да. Вы правы.

Ответ №1:

вам просто нужно получить высоту элемента и добавить это к scrollTop . если это число равно >= scrollHeight , то вы находитесь внизу!

 $(function() {
  var $scroller = $("#scroller");
  var height = $scroller.height();
  var $output = $("#output");

  $scroller.on("scroll", function(event){
    var txt = "height: "   height
              "nscrollHeight: "   this.scrollHeight
              "nscrollTop: "   this.scrollTop
              "nCalculated Bottom: "   (this.scrollTop   height);

    if(this.scrollTop   height >= this.scrollHeight){
      txt  = "n!!!At the bottom!!!"
    }
    $output.text(txt);
  });
});

 #scroller {
  border: 1px solid #CCC;
  overflow: auto;
  height: 100px;
  width: 50%;
}
#scroller p { padding: 10px; margin: 0; }
#scroller p:nth-child(even) { background-color: #EEE; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scroller">
 <p>a message</p>
 <p>another message</p>
 <p>a message</p>
 <p>another message</p>
 <p>a message</p>
 <p>another message</p>
 <p>a message</p>
 <p>another message</p>
 <p>a message</p>
 <p>another message</p>
</div>

<pre id="output"></pre>

Я бы посоветовал вместо того, чтобы запускать ваш код «прокрутите меня вниз» каждые 1000 мс, вместо этого просто прокрутите вниз, когда приходит новое сообщение amp;amp; вы уже внизу.

Кроме того, когда внизу нет нового сообщения, возможно, появится какое-то указание на то, что ниже есть новые невидимые сообщения. Слэк делает это вот так: