Как определить, когда div прокрутил нижнюю часть страницы, когда несколько div одного и того же класса?

Question

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

Итак, у вас есть такая структура:

<div class = "topic"></div>
<div class = "topic"></div>
<div class = "topic"></div>
<div class = "topic"></div>

Выше я не показал родного div, который есть у каждого из этих div, где я беру идентификатор темы у родного братадела. Но это не слишком важно для моих целей.

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

Вот что я делаю:

var scrolledids = [];
    $(window).on('scroll', function() {
        var el = $('.learndash-wrapper-topiccontent');
            if ($(window).scrollTop() >= el.offset().top + el.outerHeight() - window.innerHeight) {


                // get ID of topic, which is in previous div
                var thisid = $(this).prev().attr('id');
                var text = el.prev('div').attr('id');
                parts = text.split('-');
                topicid = parts.pop();
                console.log(topicid);
                if(jQuery.inArray(topicid, scrolledids) == -1) {
                    alert('You reached the end of this DIV');
                    scrolledids.push(topicid);
                    console.log(scrolledids);
                }


            }

    });

Что-то не так. Например, когда я использую var thisid = $(this).prev().attr('id');, он возвращает неопределенное значение. Я думаю, на данный момент в коде $(this) не то, что я ожидаю. Я также пытался использовать переменную el, но я только что понял, что это всегда первая тема div (то есть, el.prev().attr('id'); всегда одна и та же), и, читая мой код, я понимаю, почему, поскольку $('.learndash-wrapper-topiccontent'); просто вернется первымнапример, верно? Это означает, что при прокрутке вниз функция прокрутки всегда имеет дело с первым экземпляром div, независимо от того, где я на странице.

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

Идеи?

спасибо

Редактировать:

Хорошо, похоже, у меня это работает, по крайней мере, в теории. Вот что я делаю:

// check for topics being scrolled to bottom so we can mark off as completed - the topic div should have been viewed for certain amount of time though...but not sure how to implement that
    window.scrollids = [];
    localStorage.setItem("scrollids", window.scrollids);
    $(document).scroll(function(){
        var x = $(this).scrollTop();
        $(".learndash-wrapper-topiccontent:visible").each(function() {
            var el = $(this);

            var text = el.prev('div').attr('id');
            parts = text.split('-');
            topicid = parts.pop(); 

            if (x >= el.offset().top + el.outerHeight() - window.innerHeight) {

                if(jQuery.inArray(topicid, window.scrollids) == -1) {
                    console.log('You reached the end of this DIV');
                    window.scrollids.push(topicid);
                    console.log(window.scrollids);
                }

             }
        });

    });

Я подтверждаю, что каждый div подходит к концу, и его идентификатор добавляется в массив, который я отображаю на консоли.

Так что теперь это требует несколькихвопросы (может быть, мне нужен новый пост?):

1. Есть ли более эффективный способ сделать это? Может быть, подавить срабатывание события или это теперь автоматически в браузерах?
2. При таком подходе, если кто-то быстро прокрутит его, я в конечном итоге буду отмечать его как просмотр темы, но это нереально. Итак, что бы мы могли определить общее время, которое элемент имел в виду до того, как div достигнет дна?

спасибо!