Как выдать класс при скроле?

Question

[ImSoSorry]

Доброго времени суток, вопрос:

Как сделать что бы при скролле страницы первые несколько записей были без класса hidden, а остальные скрывались им? Т.е. например при заходе на страницу первые 10 записей с классом "content" были видны, а другие были скрыты, но при пролистывании страницы вниз появлялись еще 10 новых и т.д. (делать подгрузку через SQL не вариант т.к. есть фильтр и он ищет уже из подгруженных массивов)

<div class="contentblock">

  <div class="content">
    <h1>John Doe</h1>
    <p>1</p>
    <p> Lorem ipsum dor sit amet</p>
  </div>

  <div class="content">
    <h1>Michael H. Grubb</h1>
    <p>2</p>
    <p> Lorem ipsum dor sit amet</p>
  </div>

  <div class="content">
    <h1>Jacques B. Siders</h1>
    <p>3</p>
    <p> Lorem ipsum dor sit amet</p>
  </div>

  <div class="content">
    <h1>John A. Lloyd</h1>
    <p>4</p>
    <p> Lorem ipsum dor sit amet</p>
  </div>


  <div class="content">
    <h1>Sandra C. Estradae</h1>
    <p>5</p>
    <p> Lorem ipsum dor sit amet</p>
  </div>

  <div class="content">
    <h1>Clarence M. Guerrero</h1>
    <p>6</p>
    <p> Lorem ipsum dor sit amet</p>
  </div>

  <div class="content">
    <h1>Lisa E. Lynch</h1>
    <p>7</p>
    <p> Lorem ipsum dor sit amet</p>
  </div>
  


</div>

.hidden{
  display: none;
}

https://jsfiddle.net/cLtpgvfs

Comments

[Ibishka]

Записям даеш клас каждому напр. .content

let i;
for(i=0;i<11;i++) {
document.querySelectorAll(.content)[i].style.display="block";
}

[ImSoSorry]

Ibishka, можно подробнее? и причем тут display: block;?

[Ibishka]

ImSoSorry, это для примера можешь вместо этого добавить класс. Тут главное использовать for.

[ImSoSorry]

Ibishka, это я понял, но как завязать это на скролле? Т.е. сейчас ок, выводится 10 записей, а как сделать что бы при скроле выводилось еще 10? В этом основной вопрос.

[Ibishka]

ImSoSorry, Например пишешь функция onscroll. И пишешь внем если скролл сверху достигает до конца страницы выполнять сного функция с for

Answer 1

[Andrew]

https://codepen.io/kickerock/pen/oNNMKqY
Остальные извращения сделаете сами.