用一個滾動條滾動兩個容器

我想用一個滾動條來控制兩個容器。我有一個大容器，我轉移（使用CSS翻譯）來揭示另一個粘在屏幕和右側的容器。你可以看到我的實驗在這裏：用一個滾動條滾動兩個容器

我想要的是僅使用外部滾動條（控制大和大格）滾動兩者。我不在尋找任何同步滾動，我想滾動條首先將小容器向右滾動，當它到達最後，我希望它將大容器向左滾動。

我試過在包含這兩個參數的body上設置overflow-y：scroll，但我似乎無法控制右邊的那個。是因爲它是固定的嗎？如果我把它放在絕對位置，它就像是頁面的一部分 - 這不是預期的效果。

有沒有人成功實施過這種情況？

2013-02-18 Yonder

我已經搜索過插件來做到這一點，但無法找到任何。我想出了使用jQuery自己的解決方案：

var $window = $(window), 
    $panel = $('.right-panel'), 
    windowPos = $window.scrollTop(), 
    scrollPos = $window.scrollTop(), 
    maxPos = $('.panel', $panel).height() - $window.height(); 

$window.on('scroll.panels-handler', function() { 
    var scrollDelta = $window.scrollTop() - windowPos; 
    windowPos = $window.scrollTop(); 
    scrollPos += scrollDelta; 

    if (scrollPos < 0) { 
    scrollPos = 0; 
    } else if (scrollPos > maxPos) { 
    scrollPos = maxPos; 
    } 
    $panel.scrollTop(scrollPos); 
});

我加了一個MIN-和最大滾動值的容器。基本上 - 它會始終滾動側邊欄 - 直到它到達結尾 - 然後只是主窗口。

我想不出如何只滾動邊欄（主要總是滾動） - 但我對解決方案感到滿意。

查看原文codepen進行工作演示

http://codepen.io/anon/pen/ipaCI

來源

2013-02-19 12:18:02 Yonder

用一個滾動條滾動兩個容器

回答

相關問題