html - 用一个滚动条滚动两个容器

Question

我正在尝试仅使用一个滚动条来控制两个容器。我有一个大容器，我移动它(使用 CSS 翻译)以显示另一个粘在屏幕和右侧的容器。你可以在这里看到我的实验:

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

我想要的是仅使用外部滚动条(控制大和大 div)来滚动两者。我不是在寻找任何同步滚动，我希望滚动条先将小容器向右滚动，当滚动到尽头时，我希望它向左滚动大容器。

我尝试过在包含这两个内容的主体上设置一个 overflow-y: scroll - 但我似乎无法控制右侧的那个。是因为固定了吗？如果我将它定位为绝对位置，它就像页面的一部分一样跟随 - 这不是预期的效果。

有人成功实现过这种情况吗？

Answer 1

我已经搜索了执行此操作的插件，但找不到任何插件。 我自己使用 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);
});

我为容器添加了最小和最大滚动值。基本上 - 它总是先滚动侧边栏 - 直到它到达尽头 - 然后只滚动主窗口。

我不知道如何只滚动侧边栏(主栏始终滚动)- 但我对解决方案感到满意。

有关工作演示，请参阅原始代码笔

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