我有一个包含两个div的页面 - 一个包含一个表并且不是固定高度,另一个包含多个表,并且是基于第一个div的固定高度(具有自动溢出-y)。
HTML:
<div id="tables-container" style="height: 100vh;">
<div id="outstanding-table">
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
...more rows...
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</tbody>
</table>
</div>
<hr>
<div id="overview-tables" style="overflow-y: auto;">
<h3 id="table-1">Table 1</h3>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
...more rows...
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</tbody>
</table>
<h3 id="table-2">Table 2</h3>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
...more rows...
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</tbody>
</table>
<h3 id="table-3">Table 3</h3>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
...more rows...
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</tbody>
</table>
...more tables...
</div>
</div>
JS:
$(document).ready(function () {
var overviewTablesHeight = $('#tables-container').innerHeight() - $('#outstanding-table').innerHeight() - 50;
$('#overview-tables').innerHeight(overviewTablesHeight);
var timeoutTime = 1000;
var tableId = getFirstTableId();
scrollDown();
function getFirstTableId() {
var id = 'table-1';
return id;
}
function getNextTableId() {
var tableIdParts = tableId.split('-');
var id = tableIdParts[0] + '-' + (parseInt(tableIdParts[1]) + 1);
return id;
}
function scrollDown() {
setTimeout(function () {
tableId = getNextTableId();
var scrollTo = $('#' + tableId).position().top - $('#overview-tables').offset().top;
console.log($('#' + tableId).offset().top + ' - ' + $('#overview-tables').offset().top + ' = ' + scrollTo);
scroll(scrollTo);
var isBottom = $('#overview-tables').scrollTop() + $('#overview-tables').innerHeight() >= $('#overview-tables')[0].scrollHeight;
if (isBottom) {
scrollUp();
}
else {
scrollDown();
}
}, timeoutTime);
}
function scrollUp() {
setTimeout(function () {
scroll(0);
tableId = getFirstTableId();
scrollDown();
}, timeoutTime);
}
function scroll(scrollTopValue) {
$('#overview-tables').animate({ scrollTop: scrollTopValue }, 'fast');
}
});
我试图让底部自动向下滚动到每个h3
(使用this answer中的想法)直到它到达底部,此时它会滚动回到顶部,然后重新开始。但是,offset().top
似乎没有给出正确的值。例如,第三个表的偏移值低于第二个表,导致它向上滚动一点,而不是向下滚动。
这是显示问题的Bootply。我已经添加了控制台日志,因此您可以看到正在计算的值。
我已经看过这些问题,但似乎所有人都在谈论检查边距,图像,填充等,但在我的Bootply上面我没有边距,加上不正确的值似乎没有每次出去都是相同的数额:
答案 0 :(得分:0)
我刚发现this answer几乎修复了我的滚动问题,但是我必须添加一些额外的东西才能在我的情况下正常工作。这是我更新的scrollDown函数:
function scrollDown() {
setTimeout(function () {
tableId = getNextTableId();
var scrollTo = $('#' + tableId).position().top + $('#overview-tables').scrollTop() - $('#outstanding-table').innerHeight();
scroll(scrollTo);
var isBottom = $('#overview-tables').scrollTop() + $('#overview-tables').innerHeight() >= $('#overview-tables')[0].scrollHeight;
if (isBottom) {
scrollUp();
}
else {
scrollDown();
}
}, timeoutTime);
}