Javascript - 我可以让这个表格滚动到顶部吗？

Question

我必须制作一个自滚动表。 我试过用这个： https://codepen.io/salman31/pen/dYdGLa

    var my_time;
$(document).ready(function() {
  pageScroll();
  $("#contain").mouseover(function() {
    clearTimeout(my_time);
  }).mouseout(function() {
    pageScroll();
  });
});

function pageScroll() {  
    var objDiv = document.getElementById("contain");
  objDiv.scrollTop = objDiv.scrollTop + 1;  
  $('p:nth-of-type(1)').html('scrollTop : '+ objDiv.scrollTop);
  $('p:nth-of-type(2)').html('scrollHeight : ' + objDiv.scrollHeight);
  //if (objDiv.scrollTop == (objDiv.scrollHeight - 50)) {
    objDiv.scrollTop = 0;
  //}
  my_time = setTimeout('pageScroll()', 25);
}

它可以工作，但是当它到达“底部”时它不会自动滚动回顶部。 我需要改变什么？

谢谢！

Answer 1

尝试这个

var my_time;
$(document).ready(function() {
  pageScroll();
  $("#contain").mouseover(function() {
    clearTimeout(my_time);
  }).mouseout(function() {
    pageScroll();
  });

  $('#contain').bind('scroll', function()
     {
       if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
          {
              pageScroll();
          }
     })
});

function pageScroll() {  
    var objDiv = document.getElementById("contain");
  objDiv.scrollTop = objDiv.scrollTop + 1;  
  $('p:nth-of-type(1)').html('scrollTop : '+ objDiv.scrollTop);
  $('p:nth-of-type(2)').html('scrollHeight : ' + objDiv.scrollHeight);
  if (objDiv.scrollTop == (objDiv.scrollHeight - 100)) {
    objDiv.scrollTop = 0;
  }
  my_time = setTimeout('pageScroll()', 25);
}

Answer 2

该行：

objDiv.scrollTop = 0

是什么应该重置滚动 position，使用您已注释的 if 语句仅在完成向上滚动后执行它。 注释掉 if 语句后，表格根本不应该滚动，因为 pageScroll function 将始终将 scrollTop 属性设置为 0。

尝试取消注释 if 语句，并确保在比较中从 objDiv.scrollHeight 中减去容器的高度。