Horizontal Scrolling With Mousewheel

1 post Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Full Demo - http://jsbin.com/EBapIRIm/1/

I'm sure someone here may want to learn how to initiate horizontal scrolling via mousewheel. I know there's plenty of JQuery plugins out there that do this, but here's a pure Javascript solution.

Marked Up HTML & CSS for this small demo.
Code: Select all
<style type='text/css'>
body {
	margin:0;
	width: 100%;
	height: 100%;
	background: #469;
}

#contain {
	display: inline-block;
	position: relative;
	width: 100%;
	height: 100%;
	font-family: arial;
	color: #fff;
	overflow-y: hidden;
	overflow-x: scroll;
	white-space: nowrap;
}

.box {
	display: inline-block;
	width: 90%;
	height: 100%;
	padding: .5em;
	border:0;
	padding:0;
    background: #1d56b1;
}

.box:nth-child(1) {
	background: url('http://itsprettyawkward.files.wordpress.com/2011/05/sunny-day.jpg') 100%;
}
</style>

<div id='contain'>
	<div class='box'>
		<h2>Page 1</h2>
	</div>
	<div class='box'>
		<h2>Page 2</h2>
	</div>
	<div class='box'>
		<h2>Page 3</h2>
	</div>
	<div class='box'>
		<h2>Page 4</h2>
	</div>
	<div class='box'>
		<h2>Page 5</h2>
	</div>
	<div class='box'>
		<h2>Page 6</h2>
	</div>
</div>
JavaScript: (This must be added after all your html right before your closing body tag)
Code: Select all
<script type='text/javascript'>
(function() {
	function scrollMenu(e) {
		e = window.event || e;
		var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
		document.getElementById('contain').scrollLeft -= (delta*40); // Multiplied by 40
		e.preventDefault();
	}
	if (document.getElementById('contain').addEventListener) {
		// IE9, Chrome, Safari, Opera
		document.getElementById('contain').addEventListener('mousewheel', scrollMenu, false);
		// Firefox
		document.getElementById('contain').addEventListener('DOMMouseScroll', scrollMenu, false);
	} else {
		// IE 6/7/8
		document.getElementById('contain').attachEvent('onmousewheel', scrollMenu);
	}
})();
</script>
1 post Page 1 of 1
Return to “Tutorials”