自动滚动

自动滚动

关注
发信
关注(28)粉丝(399)

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

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

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启用了自动滚动，但是我不确定如何使它也可用于其他表。我希望它们在数据溢出时自动滚动。



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--;
    }
}

.scrollable{
	height:150px;
  width:200px;
	overflow-y:auto;
}

.inlineT{
    outline: 1px solid blue;
    display: inline-block;
}

<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>

最佳答案

我已经将您拥有的代码放入了名为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>

关于javascript - 在固定高度的多个表格中自动滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49527900/

10-13 01:33
Powered by LMLPHP ©2024 自动滚动 0.028310