CODEWITHSUNDEEP
htmlcssscrollbaroverflow
Yonder
Yonder

Reputation: 739

Scrolling two containers with one scrollbar

I'm trying to control two containers using only one scrollbar. I have a large container that I shift (using CSS translations) to reveal another container that is sticky to the screen and to the right side. You can see my experiment here:

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

What I want is to use only the outer scrollbar (which controls the big and large div) to scroll both. I'm not looking for any synchronized scrolling, I want the scrollbar to first scroll the small container to the right, and when it's reached the end I want it to scroll the big container to the left.

I've experimented with trying to set a overflow-y: scroll on the body that contains both of these - but I can't seem to control the one on the right. Is it because it's fixed? If I make it positioned absolute it just follows like part of the page - which is not the desired effect.

Has anybody successfully implemented this kind of situation?

Upvotes: 1

Views: 2002

Answers (1)

Yonder
Yonder

Reputation: 739

I have searched for plugins to do this but was unable to find any. I've come up with a solution myself using 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);
});

I added a min- and max-scroll value for the container. Basically - it will always scroll the sidebar first - until it's reached its end - and then only the main window.

I couldn't figure out how to scroll only the sidebar (the main always scrolls) - but I'm satisfied with the solution.

See original codepen for a working demo

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

Upvotes: 1

Related Questions