Here's an updated fiddle that addresses a few of the issues from the comments.
Firstly, here's the fiddle link: http://jsfiddle.net/dLbbntwz/
One of the things I wanted to do was clean up the code and reduce the duplication in the individual up/down
event handlers from before. Instead, I have one function _scroller
that then passes a 1/-1
to the actual _scroll
logic.
In addition, a demonstration of the mouse wheel logic was added. So now it syncs up!
There was an ugly bug, as you mentioned, that would occur if you clicked down and then moved the cursor off the buttons. This was due to the interval not being cleared. I mentioned in the other comment you could set a flag and check at the document level (allowing the user to move the cursor off the buttons - which feels more "right" for MouseEvents
). I've updated the fiddle to use that logic. Feels much better?
In addition, there was one slight issue with the percentualOffset
. While it calculated the ratio properly, it didn't take into account the scrollbar height (causing the scrollbutton to go further than the bar). I updated that, so it's more accurate.
There was also a slight issue with the logic to resize the button. If the document height was greater than the document scroll height (no scroll bar), things broke. So, that logic has been cleaned up as well.
You mentioned you wanted 10px always (for the background image) - I added padding to address that (which I recommend) - It's eases the logic when calculating the offset for the button.
Hopefully this helps! One other area I see you could exploring is being able to click and drag the scroll button to scroll the actual page - that'd be slick!