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

标签 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这里有几张固定高度的 table 。表 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>

最佳答案

我已经将您的大部分代码放入了名为 scrollly 的对象中。然后为包含类 '.tableDiv' 的每个元素创建一个实例，并调用 scrollly 函数 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/

上一篇：javascript - 从 JavaScript 代码访问 Angular 服务实例

下一篇：javascript - 根据条件弹出模态显示

相关文章：

javascript - 基本动画效果——我应该使用 jQuery 还是 HTML5 Canvas？

html - parallax.js - 链接不可点击和光标 : pointer not working

javascript - 有没有办法使用 Web Audio API 比实时更快地采样音频？

javascript - 延迟 GIF 直到点击 (CSS/Javascript)

javascript - 在模块化 JavaScript 中调用事件

javascript - 如何更改 jQuery "easy pie chart"插件的配置参数？

javascript - 所以，我在尝试建立的这个网站上遇到了两个问题。 1. 汉堡菜单和 2. 幻灯片

PhantomJS 不支持 Javascript 国际化 API

Javascript 定时安全保护垃圾邮件

javascript - jQuery 多图像预览，包含每个图像的文件名、文件大小和删除功能

©2024 IT工具网  联系我们