shubham gupta
Reputation: 341
Auto scrolling in multiple tables of fixed heights
I can add auto scroll to single table of fixed height:
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--;
}
}
However, I've multiple tables on a screen, generated at run time. Some of them requires auto scrolling if table body exceeds a fixed size. I can achieve the auto scroll in one table by referencing the table by it's id, but I'm not sure how to achieve this in case of multiple tables.
https://codepen.io/shubh2gupta/pen/WzdXpj this has few tables with fixed heights. Table 1 has auto scroll enabled but I'm not sure how to make it work for other tables as well. I want them to auto scroll whenever data is overflowed.
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>Upvotes: 2
Views: 251
Answers (1)
caramba
Reputation: 22490
I've put pretty much the code you had inside an object named scrolly. Then create an instance for every element containing the class '.tableDiv' and call the scrolly function scrollInterval()
Hope it helps.
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>Upvotes: 4
Related Questions
- How to scroll items simultaneously when they are within a table?
- Scrolling a table with multiple fixed table headers
- Table with multiple inner tables and Fixed Header Table with Horizontal Scroll
- Scrolling in html table
- HTML: Autoscroll merged table
- Programatic Scrolling of an HTML Table with Javascript/JQuery
- Automatic scroll multiple Divs with table
- Scrolling in table
- How to auto-scroll a related html table
- Scrolling Tabs in a table