javascript - 使用 jquery 并行滚动文本区域和网页

Question

这既是一个概念性问题，又是一个操作方法问题:

在 wiki 格式或非所见即所得编辑器场景中，您通常有一个用于内容输入的文本区域，然后有一个辅助预览 Pane 来显示结果，就像 StackOverflow 一样。除了大量文本(例如整页 wiki 等)之外，这种方法效果相当好。

我有一个概念，希望得到重要的反馈/建议:设想一个两 Pane 布局，预览内容位于左侧，占据页面的约 2/3，文本区域位于右侧，占据页面的 1/3。即使用户滚动浏览器窗口，文本区域也会 float ，以保持在 View 中。此外，如果用户滚动文本区域内容，假设它超出了文本区域的框架大小，则页面将滚动，以便文本区域中当前显示的内容与浏览器窗口中显示的内容同步/平行。

我正在想象一个 wiki 场景，在标记和预览之间来回切换是令人沮丧的。我很好奇别人怎么想；那里有这样的东西吗？关于如何攻击此功能有什么建议(最好使用 jquery)？

谢谢

Answer 1

任何标记语言或简化标记语言(如 wiki 符号)都会因格式而与输出不同，因此将文本区域和格式化输出滚动相同数量的像素或按一定比例将始终松散同步。

给他们用户两个滚动条并放弃......

或

我有一个主意给你。它基于根本不滚动预览，而是仅从当前编辑的部分生成预览的想法。

找出文本区域中可见的内容是我的第一个想法，但这不会比同时滚动两个 View 更可靠。

您可以做的是获取文本区域中的当前光标位置(可以完成。有一些浏览器问题)然后获取当前位置前后的一些 n 个字符，四舍五入为整行，并从中生成预览。您可以每 1 或 2 秒检查一次光标位置是否发生变化，如果发生变化则更新预览。

n 取决于文本区域大小。

优点:

没有同步问题，只需生成较大文本的一部分

缺点:

仅当用户移动文本光标时更新。

您可以将其作为一个功能...文本区域将成为页面的主要部分，而预览 div 将 float 。

如果您需要更多详细信息或帮助，请在评论中询问。