如何获得滚动选择的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;
}