鏈接滾動面板功能

我試圖鏈接兩個可滾動的div元素。請參閱this小提琴示例。右側面板顯示了左側文本中的所有動詞。鏈接滾動面板功能

側面板應始終至少顯示可見在左側文本中的所有動詞。它代表了某種文本大綱。下圖說明了什麼，我試圖完成：

雖然滾動整個頁面，內輪廓自動滾動太多，總是反映在當前可見文本的事實。我在markdown-previews之前曾見過類似的行爲。

我不確定哪種滾動行爲合適，感覺不錯。也許我們可以將側面板中最上面的動詞與文本框中的第一個可見動詞相匹配。

我能夠在滾動時同步這兩個元素。但是，側面板的內容與文本的視口不匹配。任何幫助表示讚賞。我也可以使用任何庫。

UPDATE：

我想到另一替代解決方案：

在左，右窗口中的每個動詞接收不可見標記
檢查哪個標記在左側窗口是可見查看端口
在右側窗口中顯示相同的可見標記

檢查標記是否可見應該很容易。但是，我不確定如何滾動右窗口，所有已識別的標記在右窗口中都可見。

來源

2016-05-05 user2715478

我不認爲這是可能的，只有滾動。這兩個盒子的高度不能相同，因爲你可能在文本中有太多的動詞讓它們放在正確的盒子裏。 –

當然，假設左邊框中的所有當前可見動詞都適合右邊框的當前可見部分。提供的小提琴只是一個模擬。我同意，這個例子中輪廓的高度需要更大。我還想到了一個比更新中提到的更簡單的方法。如果一個滾動左邊的div表示其高度的20％，那麼右邊的div會自動滾動其高度的20％。這與假設兩個高度相當成正比。不確定這一點。有人可以幫忙嗎？ – user2715478

這是[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/

來源

2016-05-26 11:57:51 user2715478

鏈接滾動面板功能

回答

相關問題