链接滚动面板功能答案

【问题标题】：Linked-Scroll Panel Feature链接滚动面板功能
【发布时间】：2016-05-26 19:57:51
【问题描述】：

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

侧面板应始终至少显示左侧文本中可见的所有动词。它代表某种文本大纲。下图说明了我要完成的工作：

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

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

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

更新：

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

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

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

【问题讨论】：

我认为仅通过滚动是不可能的。这两个框的高度不能相同，因为文本中的动词过多，无法放入正确的框。
当然，假设左侧框中的所有当前可见动词都适合右侧框的当前可见部分。提供的小提琴只是一个模型。我同意，轮廓的高度需要更大，如本例所示。我还考虑了一种比更新中提到的更简单的方法。如果一个滚动左边的 div 说它的高度的 20%，右边的 div 会自动滚动它的高度的 20%。这与两个高度相当成比例的假设一致。不确定这一点。有人可以帮忙吗？

标签： javascript jquery html

【解决方案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/

【讨论】：