Draggable behavior on document scroll

[Jake]

I'm trying to set up my page such that my document's scroll behaves exactly like a 'scroll' draggable. What I'm really after is document scrolling that snaps to certain areas of the page, but with all the silky physics of Draggable — I basically want my scroll events to act just as if they were throws. 

 

For example, look at GreenSock's own "scrolly knob" demo. When the scroll area is dragged, or when the knob is turned, the scroll velocity is animated smoothly to a stop at one of the snap points. But when the content is manually scrolled by the user, there's no inertia or snapping. What I want is for mouse scrolling to behave just as the other scroll methods do.

 

Any help with achieving this effect would be greatly appreciated!

[jamiejefferson]

I would suggest you only implement the 'snap to position' part of this, and leave inertial scrolling to the browsers/devices that already implement it. Users are familiar with how their device/browser scrolls, and trying to modify that (especially if it isn't perfect is just going to frustrate users. I know it frustrates me every time I encounter it, and it's usually enough to make me leave the site.

 

e.g.

var scrollTimeout,
    content = Draggable.create(target, {
      type: "scrollTop",
      throwProps: true,
      onDragStart: function() {
        content.onscroll = null;
      },
      onDragEnd: function() {
        content.onscroll = contentScroll;
      }
    })[0];

// debounce the scroll event so it only occurs after scrolling 
function contentScroll() {
  clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(scrollComplete, 300);
}
function scrollComplete() {
  // determine snapping value here...
  TweenLite.to(content, .3, { scrollTo: { y: somevalue } });
}

content.onscroll = contentScroll;