Introducing MooTools ScrollSide

By  on  

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: [Options,Events],
	options: {
		reset: true,
		movement: 75 /*,
		onScrollUp: $empty,
		onScrollDown: $empty
	initialize: function(container,options) {
		//set options
		this.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
	//listen for scrolling
	addListeners: function() {
		/* scroll reset */
		var scrollContainer = (this.container == ? window : this.container);
		scrollContainer.addEvent('scroll',function() {
			this.position = this.container.getScroll().x;
		/* mousewheeling */
		this.container.addEvent('mousewheel',function(event) {
			//scroll down/right
			if(event.wheel < 0) {
				var pos = this.position + this.options.movement;
				this.position = (pos <= this.containerWidth ? pos : this.containerWidth);
			//scroll up/left
				var pos = this.position - this.options.movement;
				this.position = (pos > 0 ? pos : 0);

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?

Recent Features

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    6 Things You Didn&#8217;t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

Incredible Demos

  • By
    jQuery Comment Preview

    I released a MooTools comment preview script yesterday and got numerous requests for a jQuery version. Ask and you shall receive! I'll use the exact same CSS and HTML as yesterday. The XHTML The CSS The jQuery JavaScript On the keypress and blur events, we validate and...

  • By
    Display Images as Grayscale with CSS Filters

    CSS filters aren't yet widely supported but they are indeed impressive and a modern need for web imagery.  CSS filters allow you to modify the display of images in a variety of ways, one of those ways being displaying images as grayscale. Doing so requires the...


  1. 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?

  2. @Chris the Developer: You would set the “container” (first argument) to just the area you’d want to scroll horizontally.

  3. kolin

    like it.

    better than that sidescrollannoybar thing yesterday :)

  4. yes…I concur, all horizontal sites should have this plugin. I hate scrolling horizontally

  5. The layout is broken for me (FF 3.5.5, OSX)

  6. @david – ah, good job.

    @keif – you’re a funny guy…

  7. Bleyder

    It’s broken for me too (FF 3.5.5, Win)

  8. Works for me on FF 3.5.5 on XP.

  9. 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.

  10. @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).

  11. @keif – It’s like that in Chrome also, so I’m guessing it’s intentional…

  12. Boris

    Wasn’t there something exactly like this on your blog already? Or is my brain slowly melting.

  13. Nice plugin. Indeed, scrolling on horizontal-layout websites is usually very unpleasant. I do like this idea :)

  14. @Boris: Nope.

  15. 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. ;-)

  16. Nice idea David, very intuitive.

  17. ali

    It’s true, broken on FF 3.5.5 XP SP3.

  18. Great effect, Thanks

  19. 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.


  20. is there anyway that i can combine this with mooflow and scrollside together? where you can scroll horizontal to different mooflow slideshows?

  21. mat

    thanks excellent work, but it’s broken on FF3.6 win. do you know why?

  22. I can confirm Mats comment above. The scrolling does not work in FF3.6 win.

  23. The arrow keys work great in FF3.6, which is almost as good as scrolling by moving the mouse.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!