Jump to content
Sign in to follow this  
starwag

Pause ScrollTo / scrollbar effect

Recommended Posts

I've been trying to create a two button system to allow viewers to scroll up and down through a list, much like they would be able to with a scrollbar.  Onmousedown should implement a scrolling animation using the list's content.  I was intending to use JavaScript ScrollTo, with anchors at the top and bottoms of the div, but wondered if there is any way to make this pause onmouseup before it reaches its anchor, and then reverse from its current position, so that I could accomplish this scrollbar effect. Basically, it should act just like a scrollbar, where releasing the down button will stop the animation at its current y-position and allow the user to redirect their scroll if they choose.  I suspect this is not possible with ScrollTo, but does anyone know?

Edited by starwag
I left out details...Sorry :(

Share this post


Link to post
Share on other sites

You can program whatever animation you'd like.  I'm not sure if there are CSS rules to do that automatically, there might be with some of the CSS animation stuff, but otherwise the old-fashioned way is to have a Javascript function that runs periodically (every few milliseconds, or whatever you want the interval to be), and each time it runs it figures out what needs to be moved and moves it a little bit.  There are a few ways to do that, again the old-fashioned way is to use setTimeout/setInterval, and the more modern way is to use animation frames.

Share this post


Link to post
Share on other sites

Sorry, I wasn't clear. I'll edit the original question.  I really appreciate your quick response, though. 

What I was wanting was to pause the ScrollTo animation onmouseup.  Example: when the button is onmousedown start animation towards the anchor at bottom of the div, and onmouseup pause the animation.  Basically, I am trying to make a button to replace a scrollbar, so I'm trying to achieve the same behavior, where holding down on the button begins a smooth scroll that pauses when the button is released.  The onmouseup should leave the div at the y location it was before it stopped, and the user should be able to start from this position to go the other y direction, if they so choose. 

I don't think setTimeout/setInterval would help for this, but maybe I'm wrong. I've tried to override the bottom anchor with current y-position coordinates, using Yoffset, but that did not work out so well, which is why I'm wondering if ScrollTo animation can be paused without setting a timer.  Like I said, I'm assuming I can't, but I am still learning.

Share this post


Link to post
Share on other sites

What I was wanting was to pause the ScrollTo animation onmouseup.

That's fine, there are mousedown and mouseup events you can use.  Again, with the basic tools like running a function every so often, or on each animation frame, you can make it behave however you'd like.

I don't think setTimeout/setInterval would help for this, but maybe I'm wrong.

You're wrong, you can either use those or requestAnimationFrame.

In your case the mousedown event would start the animation, and the mouseup event stops it.  Again, the animation itself would be handled with setTimeout/setInterval, or requestAnimationFrame.

Share this post


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  

×