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

Question

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

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

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

我已经尝试尝试在包含这两者的主体上设置一个溢出-y：滚动 - 但我似乎无法控制右侧的那个。是因为固定了吗？如果我将其设置为绝对位置，它只会像页面的一部分一样跟随 - 这不是预期的效果。

有没有人成功实施过这种情况？

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