javascript - Javascript分屏视图

Question

是否可以使用 javascript 进行分屏视图以便同时查看网站的两个部分？当您需要编辑或查看一个文档的两个单独部分时，我期待制作类似于 Microsoft Word 的东西。

Answer 1

我找到了 split.js

Split.js 是一个轻量级的、独立的实用程序，用于创建可调整的拆分视图或窗格

HTML：

<div id="a" class="split split-horizontal">
  <div id="c" class="split content"></div>
  <div id="d" class="split content"></div>
</div>
<div id="b" class="split split-horizontal">
  <div id="e" class="split content"></div>
  <div id="f" class="split content"></div>
</div>

Javascript：

Split(['#a', '#b'], {
  gutterSize: 8,
  cursor: 'col-resize'
})
Split(['#c', '#d'], {
  direction: 'vertical',
  sizes: [25, 75],
  gutterSize: 8,
  cursor: 'row-resize'
})
Split(['#e', '#f'], {
  direction: 'vertical',
  sizes: [25, 75],
  gutterSize: 8,
  cursor: 'row-resize'
})

演示

Answer 2

您可以使用框架集标签。

<frameset cols="250px,*">
  <frame src="/your/menu/bar">
  <frameset rows="50%,*">
    <frame src="/your/splitted/content">
    <frame src="/your/splitted/content">
  </frameset>
</frameset>

每一帧都可以被JS操作

Answer 3

我不知道直接为此准备的东西，但我有一个可以帮助你的想法。

使用画布并制作文档的屏幕截图。将画布放在屏幕的一侧，将实际文档放在另一侧。在用户点击画布的那一刻，切换真实物品和画布的位置。你可以逃脱这种欺骗，因为一次只能集中在一个地方。当然，您需要经常刷新画布，并且需要调整滚动位置，但结果会很好。