Как я могу предотвратить прокрутку сообщения в пределах 20 пикселей в конце моего списка?

Question

У меня есть эта функция прокрутки здесь. Я хочу знать, возможно ли предотвратить прокрутку сообщения вверх в течение последних 20 пикселей в конце? Так что, когда я прокручиваю вверх от конца, сообщение появляется только над областью 20 пикселей в конце.

jQuery(document).ready(function($) {
  let lastScrollTop = 0;

  $("#wrapper").scroll(function() {
    let st = $(this).scrollTop();

    if (st < lastScrollTop) {
      console.log("Scroll up");
    }

    lastScrollTop = st;
  });
});

#wrapper {
  height: 200px;
  
  overflow-y: scroll;
}

#test {
  background: green;
  height: 1000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="test"></div>
</div>

Answer 1

Если я правильно понимаю, вы хотите видеть только console.log() ПРОШЛОЕ 20 пикселей? Если это так,

---

Вы можете «рассчитать» прокручиваемые пиксели, проверив положение элемента по сравнению с максимальной высотой прокрутки и сравнив это!

_{Я увеличил размер в 20 пикселей и добавил 'else' console.log(), поэтому поведение легче определить;)}

jQuery(document).ready(function($) {
    let lastScrollTop = 0;

    $("#wrapper").scroll(function() {
        let st = $(this).scrollTop();

        var remainingPixels = $(this).prop('scrollHeight') - ($(this).scrollTop() + $(this).height());

        if (st < lastScrollTop) {
            if (remainingPixels > 100) {
                console.log("Scroll up", remainingPixels);
            } else {
                console.log('Muted', remainingPixels);
            }
        }
        lastScrollTop = st;
    });
});

#wrapper {
  height: 200px;
  
  overflow-y: scroll;
}

#test {
  background: green;
  height: 1000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="test"></div>
</div>

Answer 2

Обновление Обнаружение до конца менее 20 пикселей

Попробуйте следующие коды:

jQuery(document).ready(function($) {
  let lastScrollTop = 0;

  $("#wrapper").scroll(function() {
    let st = $(this).scrollTop();
    let height = $(this)[0].scrollHeight-$(this).height()
    
    if (st < lastScrollTop && st > height-20)   //Just add another condition st > height-20
    {
      console.log("scroll up, gap to end is : ", height-st);
    }

    lastScrollTop = st;
  });
});

#wrapper {
  height: 200px;
  
  overflow-y: scroll;
}

#test {
  background: green;
  height: 1000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="test"></div>
</div>