Introducing MooTools ScrollSide
This post is a proof of concept post -- the functionality is yet to be perfected.
Picture this: you've found yourself on a website that uses horizontal scrolling instead of vertical scrolling. It's an artistic site so you accept that the site scrolls left to right. You're ready to see more of the page so you use the scroll wheel like you usually do but...nothing. Nothing happens. Your mouse's scroll wheel is absolutely useless. Now you have to use your browser's scrollbar / arrow keys to see other parts of the page. In a word: lame.
ScrollSide aims to prevent the problem above by hijacking the mousewheel event. When you've included ScrollSide into your site, your user can use the mouse wheel to scroll up to go left and down to move right.
The MooTools Plugin
/* class begins */
var ScrollSide = new Class({
//implements
Implements: [Options,Events],
//options
options: {
reset: true,
movement: 75 /*,
onScrollUp: $empty,
onScrollDown: $empty
*/
},
//initialization
initialize: function(container,options) {
//set options
this.setOptions(options);
this.container = document.id(container);
if(this.options.reset) { this.container.scrollTo(0,0); }
this.containerWidth = this.container.getScrollSize().x;
this.position = this.container.getScroll().x;
//add the listener
this.addListeners();
},
//listen for scrolling
addListeners: function() {
/* scroll reset */
var scrollContainer = (this.container == document.id(document.body) ? window : this.container);
scrollContainer.addEvent('scroll',function() {
this.position = this.container.getScroll().x;
}.bind(this));
/* mousewheeling */
this.container.addEvent('mousewheel',function(event) {
event.stop();
//scroll down/right
if(event.wheel < 0) {
this.fireEvent('onScrollUp',[event]);
var pos = this.position + this.options.movement;
this.position = (pos <= this.containerWidth ? pos : this.containerWidth);
}
//scroll up/left
else{
this.fireEvent('onScrollDown',[event]);
var pos = this.position - this.options.movement;
this.position = (pos > 0 ? pos : 0);
}
this.container.scrollTo(this.position,0);
}.bind(this));
}
});
Options for ScrollSide include:
- reset: (defaults to true) Sets the container to the {x:0,y:0} position on instantiation.
- movement: (defaults to 75) The number of pixels to scroll on each wheel movement.
Events for ScrollSide include:
- onScrollUp: Fires when the user scrolls their mouse wheel up.
- onScrollDown: Fires when the user scrolls their mouse wheel down.
The Usage
var ss = new ScrollSide(document.body);
Easy, simple, quick. If you've created a website that scrolls from left to right, you MUST include this plugin on your site!
What are your thoughts about this plugin?
Interesting idea…Is there any way to constrain the scroll events to the container with the horizontal scroll, so the up/down still works when you’re not hovering the horizontal nonsense?
@Chris the Developer: You would set the “container” (first argument) to just the area you’d want to scroll horizontally.
like it.
better than that sidescrollannoybar thing yesterday :)
yes…I concur, all horizontal sites should have this plugin. I hate scrolling horizontally
The layout is broken for me (FF 3.5.5, OSX)
@david – ah, good job.
@keif – you’re a funny guy…
It’s broken for me too (FF 3.5.5, Win)
Works for me on FF 3.5.5 on XP.
Works fine for me in FF 3.5 Win 7 too.
I love the concept, however I think it should only kick in if your at the bottom of the vertical scroll to cater for smaller monitors.
@Chris the Developer:
Let me rephrase to your excellent comment:
The *layout* is broken, the code works fine.
The text box is covered by the divs (unless that was intentional).
@keif – It’s like that in Chrome also, so I’m guessing it’s intentional…
Wasn’t there something exactly like this on your blog already? Or is my brain slowly melting.
Nice plugin. Indeed, scrolling on horizontal-layout websites is usually very unpleasant. I do like this idea :)
@Boris: Nope.
Works fine on Vista 32bit, FireFox 3.5.5.
I like the idea and I’ve thought about making something myself, including anchor points and call. However, when you keep scrolling, eventually the page reaches its limits but the internal counter (I reckon) still keeps counting. So there should be some kind of max. ;-)
Nice idea David, very intuitive.
It’s true, broken on FF 3.5.5 XP SP3.
Great effect, Thanks
Hi David,
I really like the scroll left/right on mouse movement. This feature however does not apppear to become active until after the wheel scoll has been activated on the demo page.
I find the mouse cursor related navigation to be more elegant and useful that the wheel scroll.
If the page scroll were active immediately on the visitor entering the page based on the visitor’s mouse cursor movements, so that as the cursor moves to the right the page also scrolls to the right and when the cursor moves to the left the page scrolls to the left, also the vertical scrolls likewise based on cursor movements that would be brilliant.
Combine this with a right mouse click that makes clickable Ctrl +, Ctrl - and ctrl 0 items available in a pop up menu for zooming in and out on a page, and you would have a brilliant easy to use mouse controlled navigation system for use within a page of any height or width.
My eyesight is not as good as it used to be and I like to be able to easily move around on a page and zoom in on a selected area to read small text, then zoom out on the page to navigate around to another area of the page that I can then zoom in on.
Thanks
David
is there anyway that i can combine this with mooflow and scrollside together? where you can scroll horizontal to different mooflow slideshows?
thanks excellent work, but it’s broken on FF3.6 win. do you know why?
I can confirm Mats comment above. The scrolling does not work in FF3.6 win.
The arrow keys work great in FF3.6, which is almost as good as scrolling by moving the mouse.