I want to create Windows 8 (Metro UI) theme for Wordpress, first of all I should put all content horizontally, and allow users to scroll this content using mouse wheel.

Demo

To solve this problem I have used jQuery and scrollTo jQuery plugin.

First of all we should subscribe to mouse wheel event:

function initScrollCapture() {
	var body = document.getElementById("body");
	var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" 
	if (body.attachEvent) { //if IE (and Opera depending on user setting)
    		body.attachEvent("on"+mousewheelevt, scroll);
    	}
	else if (body.addEventListener) { //WC3 browsers
		body.addEventListener(mousewheelevt, scroll, false);
	}
}

After that we can create method to handle mouse wheel events:

function scroll(e) {
	var evt=window.event || e; //equalize event object
	var delta=evt.detail ? evt.detail*(-120) : evt.wheelDelta; //delta returns +120 when wheel is scrolled up, -120 when scrolled down
	if (delta > 0) {
		$('.content').scrollTo('-=30px', {axis:'x'});
	}
	else {
		$('.content').scrollTo('+=30px', {axis:'x'});
	}
}

And finally create container of the content:

<body id="body">
	<div class="content">
		<div class="item">
			test1
		</div>
		<div class="item">
			test2
		</div>
		<div class="item">
			test3
		</div>
	</div>
</body>

With following styles:

html, body {
margin: 0;
    width: 100%;
    height: 100%; 
}

div.content {
    overflow-x: auto;
    white-space:nowrap;
    margin: 0;
    width: 100%;
    height: 100%; 
}

div.item {
    width: 800px;
    background: red;
    display: inline-block;
}