Чтение прокрутки только из указанного блока c

Question

Необходимо, чтобы свиток читался именно во «втором» блоке, а не с начала документа, и когда в конце посты загружаются через ajax, он будет go незаметно к третьему блоку. Короче, действия должны происходить только во «втором» блоке.

  jQuery(window).on('scroll', onScroll); 
        function onScroll(){ 
          if (jQuery(window).scrollTop() +    100   + jQuery(window).height()   > jQuery(document).height()) {
          //ajax
          }
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="first"></div> 
    <div class="second">
        <div class="post"></div> 
    </div>
    <div class="third"></div>

Я пробовал так jQuery('.second').on('scroll', onScroll);, но не работает. Если да jQuery(window).on('scroll', onScroll);, тогда все работает, но если заменить его классом или идентификатором, это не работает

Answer 1

Вы можете проверить смещение вашего элемента, чтобы увидеть, в какой точке вы прокрутили. Также назначение вызова ajax для прослушивателя прокрутки - не очень хорошая идея, если вы не хотите слишком много запросов ajax. Поэтому, если вы хотите ограничить вызов одним, тогда вы должны поддерживать состояние.

var second = document.getElementById('.second'); // selector to your element
var state = false; // To store the state whether the ajax call has been already made

jQuery(window).on('scroll', onScroll); 
function onScroll(){ 
          if (window.scrollY > second.offsetTop && !state) {
          //ajax
          ...
          ...
          state = true; //So that it does not enter this block again
          }
}

Приведенное выше решение работает, если есть один такой блок, но если у вас их несколько, то что-то вроде этого

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

var selectors = ['second' , 'third' , 'fourth']; //All the selectors you want to have a scroll listener
var loadedSelectors = []; //Here we can add all the blocks that are already added

jQuery(window).on('scroll', onScroll);

function onScroll(){ 
selectors.forEach(function(i)){
   if (window.scrollY > document.getElementByClassName(i).offsetTop && loadedSelectors.indexOf(i) !== -1) {
          //ajax
          ...
          ...
          loadedSelectors.push(i); // Adding to the loaded list of blocks
        }
}