javascript - jQuery 滚动到可滚动 div 中元素的顶部卡住循环

Question

我正忙于建立一个页面，比赛的评分室将能够在评委对每个参赛作品进行评分时看到实时结果。

除此之外(每 10 秒检查一次更新)，还有一个功能可以检查舞台上的当前条目(以绿色标记)，这将滚动评分室的 block 以始终在顶部显示当前条目页面的。

然而，这会造成始终向上和向下滚动的无限循环。

初始滚动工作正常，但由于当前项目的位置已更改，jQuery 再次向下滚动，以便该项目现在处于新的偏移量。

我的代码目前如下所示:

这会在需要时调用该函数:

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

执行实际滚动的函数:

$.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);
 }

使用new_time和old_time是为了当用户手动滚动时，该函数不会自动滚动10秒以上。这部分有效，因此可以忽略该问题。

可滚动元素的初始大小非常小:

我尝试使用 .position() 而不是 .offset()，但得到了相同的结果。

我还尝试获取包含 div 的当前滚动位置

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

然后使用舞台上当前条目的当前位置来计算正确的滚动点，但无济于事。

理想情况下，我希望自动滚动时滚动项位于包含 div 顶部的位置 100。

这个想法是在事件中的电视或大显示器上显示，并且仅用于监控分数以检查一切是否正常，这就是为什么自动滚动是必须的。

如果我错过了一些简单的事情，请告诉我。

提前致谢。

Answer 1

我设法让这个工作正常!

我使用此线程中的答案来帮助获得我的最终工作代码:
How do I scroll to an element within an overflowed Div?

我的最终代码如下所示:

$.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);
  }
}

希望这可以帮助任何遇到类似问题的人。