Как я могу получить выбранный div на прокрутке?

Question

У меня есть div содержит много ячеек со случайной высотой. Цель: «пользователь останавливает прокрутку, чтобы выбрать ячейку, все ячейки могут быть выбраны». Ячейка выбирается курсором в левом верхнем углу. Изменение курсора ячейки, когда пользователь прокручивает div. Я сделал демо, но проблема в том, что когда пользователь находится внизу, N последних ячеек не могут быть выделены курсором. Как я могу это сделать, пожалуйста?

Спасибо за помощь:)

$(document).ready(function() {
  for (i = 0; i < 100; i++) {
    var h = Math.floor(Math.random() * (50 + 1) + 20);
    $('.content').append('<div id="' + i + '" class="cell" style="height:' + h + 'px;"></div>');
  }
  
  $(document).on('scroll', function() {
    var id = current();
    $('.cursor').css('top', $('#' + id).position().top + 'px')
  });
});

function current() {
  $('.cell').each(function() {
    if ($(this).position().top > $(document).scrollTop()) {
      id = $(this).attr('id');
      return false;
    }
  });
  return id;
}

.cell {
  width: 100px;
  border: 1px solid;
  margin-bottom: 5px;
}

.cursor {
  width: 0px;
  height: 0px;
  z-index: 9999;
  position: absolute;
  border-style: solid;
  border-width: 10px 10px 0px 0px;
  border-color: #000 transparent transparent transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div class="cursor"></div>
</div>

https://codepen.io/lokomass/pen/OJyXXwV

Answer 1

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

.content {
  margin-bottom : 130px;
}

Или просто сделать последний параметр как 65.

 var h = Math.floor(Math.random() * (50 + 1) + 65);

Примечание: Для получения требуется 65, чтобы получить до последнего.