Linked-Scroll Panel Feature

Question

Я пытаюсь связать два элемента с прокруткой div. См. Пример this. На правой боковой панели отображаются все глаголы, которые присутствуют в тексте с левой стороны.

На боковой панели всегда должны отображаться по крайней мере все глаголы, которые видны в левом тексте. Он представляет собой своего рода текст. На следующем рисунке показан, что я пытаюсь выполнить:

При прокрутке всей страницы, внутренний контур автоматически прокручивается слишком и всегда отражает факты в текущем видимом тексте. Я видел подобное поведение в markdown-previews раньше.

Я не уверен, какое поведение прокрутки подходит и чувствует себя хорошо. Возможно, каждый из них может соответствовать самому верхнему глаголу на боковой панели с первым видимым глаголом в текстовом поле.

Мне удалось синхронизировать два элемента во время прокрутки. Однако содержимое боковой панели не соответствует порт представления текста. Любая помощь приветствуется. Для меня также хорошо использовать любую библиотеку.

UPDATE:

Я думал о другом альтернативном решении:

• Каждый глагол в левом и правом окне получает невидимый маркер
• Проверьте, какие маркер в левом окне видны в порт обзора
• Показать то же видимое маркер в правом окне

Проверка наличия маркера должна быть простой. Однако я не уверен, как прокрутить правое окно, чтобы все идентифицированные маркеры были видны и в правом окне.

Answer 1

Вот [1] рабочий прототип, который я реализовал несколько недель назад. Демонстрация использует 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/