Список div, с текущим, выбранным на свитке - PullRequest
0 голосов
/ 18 апреля 2020

У меня div содержит много других со случайной высотой. Когда пользователь прокручивает, я хочу установить курсор на первый видимый элемент div (сначала видимый, потому что я не знаю, как сделать то, что я действительно хочу, в середине экрана, если это возможно?), Но когда я прокручиваю сверху или снизу я не хочу забывать другие деления. Каждый из них может быть «выбран».

Я думаю, что я делаю это правильно, но когда я в упадке, я не знаю, как я могу это сделать?

$(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

РЕДАКТИРОВАТЬ:

Если прокрутить до середины экрана ... Если я нахожусь на вершине div, я хочу, чтобы была выбрана первая ячейка. Если я прокручиваю немного вниз, я хочу выбрать вторую целле. ... Если я достигну середины div, я хочу выбрать ячейку в середине экрана (пример, который вы сделали) ... Если я достигну нижней части div, я хочу выбрать последнюю ячейку

Чтобы возобновить, я хочу, чтобы курсор двигался с помощью прокрутки. У каждой ячейки может быть курсор от первой до последней.

Проблема с вашей демонстрацией - вверху, нельзя выбрать первую и вторую, а ту же проблему внизу. enter image description here

enter image description here

...