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 中減去容器的高度。