如何在包含合并单元格的表格上实现无限滚动？
我想实现具有大量待处理数据的枢轴网格。困难在于只绘制标题的可见部分(+ 滚动缓冲区)。
可能的解决方案:
在没有平滑滚动的情况下，谨慎地重绘所有表格标题。 (我想要平滑度)
实现 div 表并在滚动事件中组织创建和删除元素。 (找不到包含合并单元格的动态 div 表的示例)
根据需要创建和删除的表序列实现表头。 (删除边框，在附近的 table 之间共享标签) 示例:
var xHeaderWrapperEl = document.querySelector(".header-wrapper");
var xHeaderTableEl = document.querySelector(".header-table");
xHeaderWrapperEl.addEventListener("scroll", function () {
if (xHeaderWrapperEl.scrollLeft >= xHeaderTableEl.offsetWidth - xHeaderWrapperEl.offsetWidth){
console.log("scroll next page");
} else if (xHeaderWrapperEl.scrollLeft <= 0) {
console.log("scroll prev page");
} else {
console.log("scroll");
}
});.header-wrapper {
overflow-x: scroll;
width: 250px;
height: auto;
display: flex;
//flex-flow: row nowrap;
}<body>
<div class="header-wrapper">
<!-- 1st block -->
<table class="header-table" border="1">
<tr>
<td colspan="10"><div>0x1</div></td>
</tr>
<tr>
<td colspan="2"><div>1x1</div></td>
<td colspan="8" rowspan="2"><div>1x2</div></td>
</tr>
<tr>
<td colspan="2"><div>2x1</div></td>
</tr>
<tr>
<td><div>3x1</div></td>
<td><div>3x2</div></td>
<td><div>3x3</div></td>
<td><div>3x4</div></td>
<td><div>3x5</div></td>
<td><div>3x6</div></td>
<td><div>3x7</div></td>
<td><div>3x8</div></td>
<td><div>3x9</div></td>
<td><div>3x10</div></td>
</tr>
</table>
<!-- 2nd block -->
<table class="header-table" border="1">
<tr>
<td colspan="4"><div>0x1</div></td>
<td colspan="6"><div>0x2</div></td>
</tr>
<tr>
<td colspan="4" rowspan="2"><div>1x1</div></td>
<td colspan="6"><div>1x2</div></td>
</tr>
<tr>
<td colspan="6"><div>2x1</div></td>
</tr>
<tr>
<td><div>3x1</div></td>
<td><div>3x2</div></td>
<td><div>3x3</div></td>
<td><div>3x4</div></td>
<td><div>3x5</div></td>
<td><div>3x6</div></td>
<td><div>3x7</div></td>
<td><div>3x8</div></td>
<td><div>3x9</div></td>
<td><div>3x10</div></td>
</tr>
</table>
<!-- 3rd block -->
<table class="header-table" border="1">
<tr>
<td colspan="2"><div>0x1</div></td>
<td colspan="6"><div>0x2</div></td>
<td colspan="2"><div>0x3</div></td>
</tr>
<tr>
<td colspan="2"><div>1x1</div></td>
<td colspan="2"><div>1x2</div></td>
<td colspan="2"><div>1x3</div></td>
<td colspan="2"><div>1x4</div></td>
<td colspan="2"><div>1x5</div></td>
</tr>
<tr>
<td colspan="2"><div>2x1</div></td>
<td colspan="2"><div>2x2</div></td>
<td colspan="2"><div>2x3</div></td>
<td colspan="2"><div>2x4</div></td>
<td colspan="2"><div>2x5</div></td>
</tr>
<tr>
<td><div>3x1</div></td>
<td><div>3x2</div></td>
<td><div>3x3</div></td>
<td><div>3x4</div></td>
<td><div>3x5</div></td>
<td><div>3x6</div></td>
<td><div>3x7</div></td>
<td><div>3x8</div></td>
<td><div>3x9</div></td>
<td><div>3x10</div></td>
</tr>
</table>
</div>
</body>- 记下 flexbox...
最佳答案
根据您的回答，我假设您将拥有 100 万列的表格。
让这样的表格连续滚动是不现实的。 从那里滚动/查找/使用信息将永远需要时间。
因此你必须有一些分页/过滤机制。 通过分页，您的问题就不那么严重了。将其拆分为包裹在可滚动页面容器中的部分表格 block 。因此，您将拥有类似于 gmail 邮件列表的可滚动页面 - 分页但可滚动。
关于javascript - 使用合并单元格在表格上无限滚动(定义的 colspan/rowspan)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30057898/