在固定高度的多个表中自动滚动

时间：2018-03-28 06:51:13

标签： javascript jquery html

我可以将自动滚动添加到固定高度的单个表：

function scrollDiv_init() {
    DivElmnt = document.getElementById('tableDiv');
    ReachedMaxScroll = false;

    DivElmnt.scrollTop = 0;
    PreviousScrollTop  = 0;

    ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}

function scrollDiv() {

    if (!ReachedMaxScroll) {
        DivElmnt.scrollTop = PreviousScrollTop;
        PreviousScrollTop++;

        ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight - DivElmnt.offsetHeight);
    }
    else {
        ReachedMaxScroll = (DivElmnt.scrollTop == 0)?false:true;

        DivElmnt.scrollTop = PreviousScrollTop;
        PreviousScrollTop--;
    }
}

但是，我在运行时生成的屏幕上有多个表格。如果表体超过固定大小，则其中一些需要自动滚动。 我可以通过引用表的id来实现一个表中的自动滚动，但我不确定如何在多个表的情况下实现这一点。

https://codepen.io/shubh2gupta/pen/WzdXpj这里有几张固定高度的桌子。表1已启用自动滚动，但我不确定如何使其适用于其他表。我希望它们在数据溢出时自动滚动。

＆＃13;
＆＃13; 
function scrollDiv_init() {
    DivElmnt = document.getElementById('tableDiv');
    ReachedMaxScroll = false;

    DivElmnt.scrollTop = 0;
    PreviousScrollTop  = 0;
    ScrollRate =100;
    ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}

function scrollDiv() {

    if (!ReachedMaxScroll) {
        DivElmnt.scrollTop = PreviousScrollTop;
        PreviousScrollTop++;

        ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight - DivElmnt.offsetHeight);
    }
    else {
        ReachedMaxScroll = (DivElmnt.scrollTop == 0)?false:true;

        DivElmnt.scrollTop = PreviousScrollTop;
        PreviousScrollTop--;
    }
}
＆＃13; 
.scrollable{
	height:150px;
  width:200px;
	overflow-y:auto;
}

.inlineT{
    outline: 1px solid blue;
    display: inline-block;
}
＆＃13; 
<body onload="scrollDiv_init()">
<div id="bodyDiv">

  <div id = "tableDiv" class="scrollable inlineT">
      <strong>Table1</strong>
  <table>
  <tbody>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  </tbody>
  </table>
  </div>


  <div id = "tableDiv" class="scrollable inlineT">
      <strong>Table2</strong>
  <table>
  <tbody>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  </tbody>
  </table>
  </div>


  <div id = "tableDiv" class="scrollable inlineT">
    <strong>Table3</strong>
  <table>
  <tbody>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  </tbody>
  </table>
  </div>


  <div id = "tableDiv" class="scrollable inlineT">
    <strong>Table4</strong>
  <table>
  <tbody>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  </tbody>
  </table>
  </div>


  <div id = "tableDiv" class="scrollable inlineT">
    <strong>Table5</strong>
  <table>
  <tbody>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  </tbody>
  </table>
  </div>


  <div id = "tableDiv" class="scrollable inlineT">
    <strong>Table6</strong>
  <table>
  <tbody>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>

  </tbody>
  </table>
  </div>


  <div id = "tableDiv" class="scrollable inlineT">
    <strong>Table7</strong>
  <table>
  <tbody>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  </tbody>
  </table>
  </div>


  <div id = "tableDiv" class="scrollable inlineT">
    <strong>Table8</strong>
  <table>
  <tbody>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>

  </tbody>
  </table>
  </div>

</div>
</body>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：4)

我已将相当多的代码放在名为scrolly的对象中。然后为包含类'.tableDiv'的每个元素创建一个实例，并调用scrolly函数scrollInterval()

希望它有所帮助。

var scrolly = function(element){
    this.element = element
    this.reachedMaxScroll = false;
    this.scrollTop = 0;
    this.previousScrollTop  = 0;
    this.scrollRate =100;
    
    this.scrollInterval = function(){
        setInterval(
            (function(){
                this.scrollDiv()
            }).bind(this),
            this.scrollRate
        )
    };
    
    this.scrollDiv = function(){
        if (!this.reachedMaxScroll) {
            this.element.scrollTop = this.previousScrollTop;
            this.previousScrollTop++;

            this.reachedMaxScroll = this.element.scrollTop >= (this.element.scrollHeight - this.element.offsetHeight);
        } else {
            this.reachedMaxScroll = (this.element.scrollTop == 0)?false:true;

            this.element.scrollTop = this.previousScrollTop;
            this.previousScrollTop--;
        }
    };
};

var divElements = document.querySelectorAll('.tableDiv');
divElements.forEach(function(element){
    new scrolly(element).scrollInterval();
});
.scrollable{
	height:150px;
  width:200px;
	overflow-y:auto;
}

.inlineT{
    outline: 1px solid blue;
    display: inline-block;
}
<div id="bodyDiv">

  <div class="tableDiv scrollable inlineT">
      <strong>Table1</strong>
  <table>
  <tbody>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  </tbody>
  </table>
  </div>


  <div class="tableDiv scrollable inlineT">
      <strong>Table2</strong>
  <table>
  <tbody>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  </tbody>
  </table>
  </div>


  <div class="tableDiv scrollable inlineT">
    <strong>Table3</strong>
  <table>
  <tbody>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  </tbody>
  </table>
  </div>


  <div class="tableDiv scrollable inlineT">
    <strong>Table4</strong>
  <table>
  <tbody>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  </tbody>
  </table>
  </div>


  <div class="tableDiv scrollable inlineT">
    <strong>Table5</strong>
  <table>
  <tbody>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  </tbody>
  </table>
  </div>


  <div class="tableDiv scrollable inlineT">
    <strong>Table6</strong>
  <table>
  <tbody>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>

  </tbody>
  </table>
  </div>


  <div class="tableDiv scrollable inlineT">
    <strong>Table7</strong>
  <table>
  <tbody>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  </tbody>
  </table>
  </div>


  <div class="tableDiv scrollable inlineT">
    <strong>Table8</strong>
  <table>
  <tbody>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>
  <tr><td >NAME </td><td>TYPE </td><td>QUANT</td></tr>

  </tbody>
  </table>
  </div>

</div>

相关问题
最新问题