Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
Jake

Draggable behavior on document scroll

Recommended Posts

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!

Link to post
Share on other sites

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;
  • Like 2
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×