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
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    5 More HTML5 APIs You Didn&#8217;t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

Incredible Demos

  • By
    CSS Kwicks

    One of the effects that made me excited about client side and JavaScript was the Kwicks effect.  Take a list of items and react to them accordingly when hovered.  Simple, sweet.  The effect was originally created with JavaScript but come five years later, our...

  • By
    Shake Things Up Using jQuery UI&#8217;s Shake Effect

    Yesterday I created a tutorial showing you how you can shake an element using Fx.Shake, a MooTools component written by Aaron Newton. It turns out that jQuery UI also has a shake effect which can draw attention to an element. The XHTML Exactly the same as...

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!