javascript - 如何将浏览器视口(viewport)拆分为两个水平 Pane

Question

在HTML 4之前，可以创建带有在不同 Pane 中加载不同HTML文件的框架的布局。

我想要做的是获得相似的结果，但加载并在屏幕上显示同一文档的两个不同部分。

我理想的范例是MS Word，它可以将窗口分为2个水平部分，以在同一文档的每个不同部分中显示(在比较文档的不同部分或将部分从另一侧长距离移动到另一侧时非常有用)文档)或MS Excel(甚至LibreOffice或OpenOffice Calc也具有类似功能)，出于相同的原因，它允许将工作表的 Pane 分为2个(甚至4个)部分，或者使顶部的某些行或顶部的某些列保持可见右边(例如行或列标题)。

下图显示了它:


红色箭头指示将窗口文档分成两部分的装订线，允许分别滚动每个部分，您可以看到上 Pane 中的行数是3，下 Pane 中的行数是21。装订线也可以调整大小。

是否可以使用带有HTML和CSS的普通JS(请不要使用jQuery或其他框架)来做到这一点？

限制条件:

所有2个 Pane (顶部和底部)的文档必须相同(旧框架集需要加载两个不同的文档或两次加载同一文档:我已经在使用它，但是如果可能的话，我希望使用更干净的方法!)

分隔符(装订线？)必须可调整大小

如果我在顶部(或底部) Pane 中修改了某些内容(使用contenteditable属性)，则该文档的两个不同部分会完全同步，底部(或顶部) Pane 会立即显示所做的修改MS Word或Excel ...因此，如果我删除了任何底部 Pane 表单元格中的内容，即使顶部内容也进行了相应调整(甚至是列大小)，如MS Word，Excel，Calc等也是如此。

单击特定按钮

即可打开和关闭拆分 View 。

我不在乎旧的浏览器，只在乎ECMA script 2015或更新的浏览器

HTML文件具有许多addEventListener()方法附加到各种HTML元素(例如按钮，文本框，复选框，选择框等)的事件侦听器:这意味着已回答的解决方案必须能够使它们完整并在两个 Pane 中都可以使用。

我将在哪里使用？

我在本地HTML文件(不涉及Web服务器)中有一堆表，这些表从csv文件或浏览器 session 存储中加载数据，并且我经常需要比较不同点的数据或将 header 固定在顶部滚动特定表的其余部分，或者在其中插入新数据或更新其中的旧数据时，不断查看我要在哪个表单元格中插入或更新数据。

情况:

目前，我正在使用以下代码:

function splitView()
{
    var tgtSrc = location.href;
    var frameset =  '<frameset rows="*,*">' +
                        '<frame name="' + upFrame + '" src="' + tgtSrc + '">' +
                        '<frame name="' + dwFrame + '" src="' + tgtSrc + '">' +
                    '</frameset>';
    document.write(frameset);   
}

上面的函数将当前窗口 Pane 水平分割为两个帧，称为upFrame和dwFrame(这是两个变量)。分割后，将可调整大小的装订线放置在两个帧之间。

加上同步文档数据的两个实例的算法:它通过在一个帧中的每个数据编辑中将数据保存到该帧的 session 存储中，然后将相同数据重新加载到另一个帧中来工作。

它有点用，但是框架并不是要走的路，我想摆脱两次加载文档并同步每个实例与所有相关缺点的需求。因此，不幸的是，这并不是我要寻找的最终答案，因为它有一些缺点:

即使兼容HTML5的文件也不支持frame和frameset标签，即使浏览器仍支持

该文件必须加载两次(每帧一次)，这意味着明显的性能不足，并且难以实时同步一帧中的任何编辑与另一帧(可能需要双向同步，因此可以在两个显示中都进行编辑)文档的一部分)。不幸的是，即使需要同步过程，也失去了在每次同步循环中都会瞬间锁定UI的性能

同步过程不是实时的，它有一些延迟(几秒钟):如果我将其缩短，我将缺乏很多性能，包括冻结浏览器

因此，我愿意提供更干净，更高效的解决方案，以获得更好的答案。
(我什至建议Chrome开发人员在浏览器中为其实现一个功能，因为我真的认为这是必须具备的功能，尤其是考虑到正在扩展的在线数据管理系统。)

我在寻找什么:

使用我上面正在使用的代码完全不是强制性的:答案也可以提出一种完全不同的方法。

因此，我要寻找的最终解决方案是 ，类似于Google Spreadsheet 使用的拆分功能(如果可以，我希望我们也可以)，下面是带有示例的图片



仔细看一下:有一个可以水平移动的装订线(也有一个垂直装订线，但我不太在乎垂直拆分，只是水平的)，当电子表格向下滚动时，下面的行消失了:实际上，装订线上方的第一行是n。 1在装订线下的第一行是n。 45。

另请注意，图片最左端的红色大箭头表示双白色箭头。

我尝试研究Google电子表格方法以对其进行反向工程，然后 提取的显着特征，并将相同的“原理”适应本地应用程序，但是我不足以了解它们的确切功能:我怀疑是“表排碰到水槽”只是藏在它的后面，但是我不确定。

恕我直言，这是每个浏览器(甚至是用于便携式设备的浏览器)都必须本机实现的功能，而不能使用HTML 5中不再支持的旧框架技术。编辑它的不同部分(例如，作为一个很长的表)，以使每个 Pane 相互更新，还不是浏览器功能，因此与此同时，它需要一种解决方法。

注意:

CSS属性

position: sticky;

也可以用来解决部分问题(在编辑时或将数据插入到正文中时保持thead的状态)，但是不幸的是，至少在某些浏览器上，它似乎无法在thead元素上正常工作。它还解决了一部分问题:实际上，如果需要将来自同一表或不同表的不同部分的数据比较到同一文档中，则此解决方案根本不好。因此，还需要其他一些东西。

Answer 1

只是好奇，如果它是计算机上的本地文件，为什么不尝试使用上面提到的Excel之类的程序的本机功能，而是在浏览器中尝试从csv文件编辑表数据？或者，如果您想在浏览器中执行此操作，Google表格是否允许使用分屏显示？没错，我只是不明白为什么不使用专门针对此类工作而优化的程序。

如果您想继续使用框架，则应该能够将文件重新加载到一个框架中，只需将innerHTML从一个框架复制到另一个框架，如下所示。如果您使用的是 session 存储，虽然可以更快地将编辑内容保存到该文件和csv文件中，但可以从 session 存储而不是文件中加载。

window.frames[upFrame].document.body.innerHTML = window.frames[dwFrame].document.body.innerHTML;

您可以将DIV用作容器，而不必使用框架，而是根据您的建议将其加载到本地存储中，并从那里填充两个DIV。保存将同时转到csv文件和本地存储(如帧解决方案)。 Javascript可以跟踪滚动顶部，因此一旦从本地存储中重新加载，您就可以将这两个部分“弹出”到它们所在的行中。

虽然更快的解决方案可能是将csv数据保留在内存(数组)中并保存到csv，但是从内存上进行更新比理论上的文件快得多:)