Как я могу проверить, была ли прокрутка сделана кодом или пользователем?

Question

Я сейчас создаю чат. В моем чате я внес свой вклад. Если в поле ввода ввести что-либо и нажать клавишу ввода, добавляется новое сообщение get, список get прокручивается вниз, чтобы новое сообщение было видимым, а не скрытым.

Проблема в том, что я делаю особые вещи в событии прокрутки, которое должно запускаться только тогда, когда пользователи прокручивают страницу вниз, а не моя функция, которая добавляет новое сообщение.

Так как я могу сделай это?

Я уже попробовал .on( "mousewheel", function () {, но это событие get также срабатывает, если я нахожусь в конце списка, и я все еще пытаюсь прокрутить вниз, даже если больше нет ничего для go.

jQuery( document ).ready( function ( $ ) {
	$( "#messages" ).scroll( function () {
		console.log( "Scrolled!" );
	} );

	$( "input" ).keypress( function ( e ) {
		if ( e.which === 13 && !e.shiftKey ) {
			$( "#messages" ).scrollTop( $( "#messages" ).prop( "scrollHeight" ) );
			$( "#messages" ).append( "<div class=\"message right\">" + $( this ).val() + "</div>" );
			$( this ).val( "" );
		}
	} );
} );

#messages {
  border: 1px solid;
  max-height: 200px;
  overflow-y: scroll;
}

#messages > div { 
  margin-bottom: 15px;
  padding-left: 3%;
  padding-right: 3%;
}

.message.right {
  text-align: right;
}

.divider span {
  padding: 6px 12px;
  text-align: center;
  line-height: 1;
  background: gray;
  color: #fff;
  border-radius: 6px;
}

.date-area {
  margin-top: -35px;
}

.spacer {
  height: 35px;
}

input {
  margin-top: 10px;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messages">
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
</div>
<input placeholder="Enter something and press enter key"/>

Answer 1

Вы можете добавить условие в $('#messages').scroll(...). Здесь я использую переменную scrollCauseByNewMessage, чтобы определить, что делать, когда прокрутка вызвана вводом новых сообщений и когда прокрутка вызвана фактической прокруткой.

jQuery(document).ready(function($) {
  let scrollCauseByNewMessage = false
  $("#messages").scroll(function() {
    if (scrollCauseByNewMessage) {
      scrollCauseByNewMessage = false
      // Do other things
      return
    }
    
    // Do your special scroll function here
    else {
      console.log("Scrolled!");
    }
  });

  $("input").keypress(function(e) {
    if (e.which === 13 && !e.shiftKey) {
      scrollCauseByNewMessage = true
      $("#messages").scrollTop($("#messages").prop("scrollHeight"));
      $("#messages").append("<div class=\"message right\">" + $(this).val() + "</div>");
      $(this).val("");
    }
  });
});

#messages {
  border: 1px solid;
  max-height: 200px;
  overflow-y: scroll;
}

#messages>div {
  margin-bottom: 15px;
  padding-left: 3%;
  padding-right: 3%;
}

.message.right {
  text-align: right;
}

.divider span {
  padding: 6px 12px;
  text-align: center;
  line-height: 1;
  background: gray;
  color: #fff;
  border-radius: 6px;
}

.date-area {
  margin-top: -35px;
}

.spacer {
  height: 35px;
}

input {
  margin-top: 10px;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messages">
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
</div>
<input placeholder="Enter something and press enter key" />