jQuery scroll to top of element in scroll-able div stuck loop

Question

I am busy building a page where the Scoring Room of a competition will be able to see live results as the judges score each entry.

Along with this (that checks for updates every 10 seconds), there is a function that checks for the current entry on stage (marked in green), this will scroll the scoring room's block to always display the current entry at the top of the page.

This however creates an endless loop of scrolling up and down the whole time.

The initial scroll works fine, but then because the position of the current item has changed, jQuery scrolls down again so that the item is now at the new offset.

My code currently looks like this:

This calls the function when needed:

$('#entry_'+curr_entry).scrollView();

The function that does the actual scrolling:

$.fn.scrollView = function () {
     var item_top = $(this).offset().top;
     var offset = item_top - 100;

     //check if sure scrolled more than 10 seconds ago
     var new_time = new Date();
     var old_time = new Date(last_scrolled);

     if (new_time - old_time > 10000 || last_scrolled == '') {
         $('.current_section').animate({
         scrollTop: offset
     }, 1000);
 }

The new_time and old_time is used so that when the user manually scrolls, this function won't automatically be scrolling for 10 more seconds. This part works, so this can be ignored for the question.

The initial size of the scroll-able element is quite small:

I have tried using .position() instead of .offset() but I get the same results.

I also tried to get the current scroll position of the containing div with

$('.current_section').animate.scrollTop();

and then using the current position of the current entry on stage to calculate the correct scroll point, but to no avail.

Ideally I would like for the scrolling item to be at position 100 form the top of the containing div when automatically scrolling.

The idea was that this be on a TV or big monitor at the event and would only be used to monitor the scores to check that everything is in order, that is why the automatic scrolling is a must.

Please let me know if there is something simple that I missed.

Thanks in advance.

Why downvote without leaving a reason? – Rickus Harmse May 15 '18 at 14:29 — Rickus Harmse, May 15 '18 at 14:29

score 1 · Answer 1 · answered May 16 '18 at 06:53

I managed to get this working fine!

I used the answer in this thread to help get to my final working code:
How do I scroll to an element within an overflowed Div?

My final code looks like this:

$.fn.scrollView = function () {

    var parentDiv = $('.current_section');
    var innerListItem = $(this);
    var offset = 140;

    //check if sure scrolled more than 10 seconds ago
    var new_time = new Date();
    var old_time = new Date(last_scrolled);

    if (new_time - old_time > 10000 || last_scrolled == '') {
        $('.current_section').animate({
      scrollTop: parentDiv.scrollTop() + innerListItem.position().top - offset
    }, 1000);
  }
}

Hope this can help anybody with a similar issue.

jQuery scroll to top of element in scroll-able div stuck loop

1 Answers1