链接滚动面板功能

Question

我正在尝试链接两个可滚动的div元素。请参阅this小提琴示例。右侧面板显示左侧文本中存在的所有动词。

侧面板应始终至少显示左侧文本中可见的所有动词。它代表某种文本大纲。 下图说明了我正在努力实现的目标：

滚动整个页面时，内部轮廓也会自动滚动，并始终反映当前可见文本中的事实。我之前在markdown-previews看过类似的行为。

我不确定哪种滚动行为适合并且感觉很好。也许有人可以将侧面板中最上面的动词与文本框中的第一个可见动词相匹配。

滚动时我能够同步这两个元素。但是，侧面板的内容与文本的视口不匹配。任何帮助表示赞赏。我也可以使用任何库。

更新

我想到了另一种替代解决方案：

• 左右窗口中的每个动词都会收到一个不可见标记
• 检查左侧窗口中的哪个标记在视口
中可见
• 在右侧窗口中显示相同的可见标记

检查标记是否可见应该很容易。但是，我不确定如何滚动右侧窗口，所有标识的标记也在右侧窗口中可见。

Answer 1

这是[1]我几周前实施的工作原型。该演示使用Waypoint来识别视口中的当前可见元素。我还手动修改了Waypoint源代码中的一些数字，以便更好地滚动。

也可以用无框架的方式替换Waypoint jQuery版本，以获得更好的性能。

<div id="overflow-scroll">
    <p>Our recent experience at this Jamaican themed restaurant in North Pinellas County Florida right off the Pinellas Trail
<span id="v1" class="continuous-group-left waypoint"><b>was</b></span>
   [...]
</div>
var continuousElements = document.getElementsByClassName('continuous-group-left')
  for (var i = 0; i < continuousElements.length; i++) {
      var inview = new Waypoint.Inview({
        element: continuousElements[i],
        [...]
        exit: function(direction) {

        if(direction == 'down') {
            var topPos = document.getElementById('l_' + this.element.id).offsetTop;
            document.getElementById('div2').scrollTop = topPos+10;
      }
    },
    context: document.getElementById('overflow-scroll'),
    [...]

[1] https://jsfiddle.net/guw2otfk/11/