Как сделать при прокрутке страницы отмечать прочитанные блоки (элементы)?

Question

[ctacua]

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

<section class='comment' comment-id=1>
коммент1
</section>
<section class='comment' comment-id=2>
коммент2
</section>
...
<section class='comment' comment-id=100>
коммент100
</section>

Подскажите в какую сторону рыть.
Как это вижу я.
1. Определяем позицию всех элементов на странице - с этим сложности, я не могу понять как это сделать.
2. После того как элемент отображается в видимой части экрана запускать выполнение скрипта - с этим проблем нет!

Спасибо.

UPD. Вот для одного элемента. А как отслеживать и реагировать на список элементов?

$(window).on('scroll', () => { 
            var blockPosition = $('.comment').offset().top, 
                  windowScrollPosition = $(window).scrollTop();
              
            if( blockPosition < windowScrollPosition ) {
                console.log('ok' + blockPosition); 
            }
        });

Как обратиться к элементу .comment который в видимой части экрана?

Comments

[ForSureN1]

https://freelance.habr.com/ пожалуйста

[ctacua]

ForSureN1, похоже вы читать не умеете!

[ForSureN1]

ctacua, Да нет, умею же, и собственно не наблюдаю хоть малейшей попытки написания данного скрипта

[Ankhena]

1. Определяем позицию всех элементов на странице - с этим сложности, я не могу понять как это сделать.

Да и не нужно.
https://developer.mozilla.org/ru/docs/Web/API/Inte...

[ctacua]

Ankhena, очень интересно. Пока разбираюсь, но уже сейчас могу добавить следующее
https://habr.com/ru/post/494670/
https://habr.com/ru/company/timeweb/blog/574972/
https://jquery-plugins.net/scrollama-js-javascript...

[Ankhena]

ctacua, да, я тоже могу, но поскольку это почти ежедневный вопрос, то мне надоело писать эту кучу ссылок каждый раз.

Answer 1

[Кирилл Горелов]

https://gist.github.com/Kirill-Gorelov/97c2fc105a8...
Оно?

Comments

[ctacua]

Спасибо за ссылку, но она у меня не открывается. Скорее всего у вас приватный gist

Answer 2

[ctacua]

Если что я сделал!

$(window).on('scroll', () => { 
          var windowScrollPosition = $(window).scrollTop();

          $( '.comment' ).each( function ( index ) {
            var blockPosition = $( this ).offset().top; 
              
            if( blockPosition < windowScrollPosition ) {
                console.log('ok' + $( this ).attr('uniqid'));
                $(this).removeClass('comment'); 
            }

          })

        });