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

Okay, so I've been tinkering with this concept via different methods.  This is what I have, but I have problems.

function scrollDown() { setInterval(function() {
    window.scrollTo(0, document.body.scrollHeight);
}, 2000);
}


 

the page just jumps to the bottom instead of slowly scrolling to the bottom of the page.  I have rearranged the functions a few times and got pretty much the same results.  Now I'm confused why nothing is working.

Share this post


Link to post
Share on other sites

That's what you're telling it to, scroll to the bottom of the page every 2 seconds.  If you want an animated scroll you need to scroll it little by little each time.  For example, run a function every 10 or 20 milliseconds and each time you only scroll it by 5 pixels or so, until it's at the bottom.

So you could start by figuring out how far you want to scroll, so the total distance, figure out how long you want the effect to be and how often the function will run, and divide to get the number of pixels to scroll each time the function runs.  Once it's at the end then you can cancel the interval so it doesn't keep running.

Share this post


Link to post
Share on other sites

 I won't be able to smooth scroll this though, will I?  I used the example in this as a guide how to js animate but why does my setInterval create tiny increments when this example seems to allow for it to create a smooth scroll to the bottom of the page? 

I know what setInterval/clearInterval is supposed to do as far as what examples I have seen, but using it to time how long it takes a page to scroll to an anchor seems like something that is "off the label" use.  I'm probably wrong again.  The long and short of it is: Onmousedown I was trying to scroll to the bottom of the page but to time it for a slow scroll to the bottom.  Eventually, I was going to add clearInterval onmouseup to pause the scroll motion.  I hadn't gotten to that last bit yet, because I'm still stuck on this part.  I just don't understand why my setInterval can't time how long it takes to scroll to the bottom of the page.

 

Edited by starwag

Share this post


Link to post
Share on other sites

why does my setInterval create tiny increments when this example seems to allow for it to create a smooth scroll to the bottom of the page? 

Maybe it's the timing.  The example on that page runs every 10 milliseconds and moves the box 1 pixel at a time.  If you increase the interval or increase the difference each time, it would get more choppy.  If you change that example so it runs every 50 milliseconds and moves it by 5 pixels each time, you'll see that it becomes less smooth.

but using it to time how long it takes a page to scroll to an anchor seems like something that is "off the label" use.

You use it any time you need to schedule a function to run at a later time.  With animations, that's exactly what you're doing, running code over time.

I just don't understand why my setInterval can't time how long it takes to scroll to the bottom of the page.

The code that you posted above tells the browser to wait 2 seconds to run that function, and when the function runs it immediately sets the scroll position to the bottom.  So you're telling the browser set the scroll position to the bottom in 2 seconds.  You're not telling it to set it little by little until it gets to the bottom, you're telling it to wait 2 seconds and then set the scroll position to the bottom.

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  

×