Как исключить «анимацию» из «прокрутки» addEventListener?

Question

У меня такая проблема, я не могу обернуть голову:

Я проверяю, прокручивает ли пользователь страницу после использования формы поиска. В этом случае форма поиска должна расфокусироваться с:

var content = document.querySelector('.content');
    content.addEventListener("scroll", function(e) {
    $("#search_box").blur();
});

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

$('#search_box').keyup(function() {

   $('.content').animate({
       scrollTop: 0
   });

}

Как видите, это создает проблему. Пользователь вводит текст, страница автоматически прокручивается вверх, а поле поиска расфокусируется в основном на каждой набираемой букве, что очень раздражает.

Есть ли простой способ исключить scrollTop или .animate из the addEventListener?

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

Answer 1

Вы можете переориентировать поле поиска после завершения анимации:

$('#search_box').keyup(function() {
    $('.content').animate({
        scrollTop: 0
    }, function() {
        $('#search_box').focus();
    });
}

Answer 2

Вы можете сделать так, чтобы окно поиска теряло фокус только при прокрутке страницы вниз:

var content = document.querySelector('.content');
var currentPos = content.scrollTop;

content.addEventListener('scroll', function(e) {
    if (content.scrollTop > currentPos) {
        $('#search_box').blur();
    }
    currentPos = content.scrollTop;
});