Question

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

我想要的是只使用外部滚动条（控制大和大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);
});

我为容器添加了最小和最大滚动值。基本上 - 它将始终首先滚动侧边栏 - 直到它到达终点 - 然后只有主窗口。

我无法弄清楚如何只滚动侧边栏（主要总是滚动） - 但我对解决方案感到满意。

请参阅原始codepen以了解正常工作

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

使用一个滚动条滚动两个容器

1 个答案: