Horizontal scroller with Mootools

Question

I'm working on a site for myself, and I'm using a custom horizontal scroller done with Mootools that I got from another site (and got their permission to use). While I've managed to get the scroller to function the way I want to, there are two issues I'm looking to fixed and don't have the know-how myself to figure out.

I've set up a simple demo page here: http://bit.ly/b8BVI9

You can scroll with your mousewheel/trackpad up and down or left and right, you can grab the scroller and drag it, and you can click anywhere along the line to jump directly. So all the functionality is okay. My issues are:

1. If you scroll to the middle (or anywhere except the start position), then resize your browser window, the scroller handle will jump back to the start/left even though the contents stays put. If you then start scrolling again the contents will jump back to align with the scroller handle's position. Ideally the handle would stay put when the window is resized, but I can't figure out how to do this on my own.

2. At the end/right of the page I'd like to have a back button that smoothly scrolls you back to the start/"top". The best I've managed is what you see there now, where the contents scrolls back smoothly, while the scroller simply jumps back to it's first position. While I could work around that by simply have it jump straight back to the start, it would certainly look much nicer if the scroller would smoothly scroll its way back like the contents does.

Any help with this would be greatly appreciated!

Answer 1

Your first issue is occurring because positionIt() is being called every time the window resizes. Looking into that function, you can see that the bottomSlider is being initialized every time. I would break positionIt() into a initializing function and positioning function, and ensure that only the positioning function is called when the window resizes.

The second issue could probably be fixed by creating a separate step() function for the bottomSlider and calling that within onChange, rather than using an inline anonymous function. You could then create a timer or tween that calls step() to move the scrollbar back to its original position (and subsequently move the viewport in accordance with it.)

Hopefully that makes some sense!