javascript - Javascript 分割画面ビュー

Question

Web サイトの 2 つの部分を同時に表示するために、javascript で分割画面ビューを作成することは可能ですか? 1 つの文書の 2 つの別々の部分を編集または表示する必要がある場合に、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

これに直接対応する準備ができているかどうかはわかりませんが、役立つアイデアがあります。

キャンバスを使用して、ドキュメントのスクリーンショットを作成します。画面の一部にキャンバスを配置し、別の部分に実際のドキュメントを配置します。ユーザーがキャンバスをクリックした瞬間に、実際のアイテムとキャンバスの場所が切り替わります。一度に 1 つの場所にしか焦点を合わせることができないため、この種のチートを回避できます。もちろん、canvs を頻繁に更新する必要があり、スクロール位置で遊ぶ必要がありますが、うまくいく可能性があります。