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

Recent Features

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • By
    CSS Fixed Position Background Image

    Backgrounds have become an integral part of creating a web 2.0-esque website since gradients have become all the rage. If you think gradient backgrounds are too cliche, maybe a fixed position background would work for you? It does provide a neat inherent effect by...

  • By
    Duplicate the jQuery Homepage Tooltips Using Dojo

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here's how to accomplish this same effect using Dojo. The XHTML The above HTML was taken directly from the jQuery homepage -- no changes. The CSS The above CSS has been slightly modified to match the CSS rules already...

Discussion

  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.

    Thanks
    David

  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!