Code For Horizontal Scrolling On Your WebPage Using Mouse Wheel

Many designers are now working on widescreen websites that are even 3x to the visitor screen so after designing these type of sites, they need to make there wider web pager scrollable using official buttons that are  Mouse Wheel. Usually the default function of Mouse Wheel is to scroll a webpage vertically but Designers need it to scroll it horizontally because they have a wide site not long.

For this purpose, we got a CODE that we are sharing with you below that have more awesome features as you needed. Its short and clean with cross browsers compatibility and can be fully customizable. It can also easily mix up with your own code and can work with any code without conflicting. So without any more preface, here is the live working DEMO URL that can explain you more what we want to desire. After seeing this, check out our features of this code and then garb the code and see its editing below.

Features:

1.) Pure JavaScript Code.
2.) Quick To Load And Easy To Add.
3.) Cross Browser Compatibility.
4.) It Will Scroll Your Page On X-Axis Only Through Mouse Wheel.
5.) You Can Scroll X-Axis Through Mouse Click On ScrollBar On Y-Axis Only.
6.) No JQuery Or Any External File.
7.) Short Code.
8.) Work On All Platform, Website, Blogger, WordPress.
9.) No CSS3.
10.) Will Not Conflict With Other Codes.

How To Use This Code?

So easy to use it. First you must have a DIV that width should be more then visitor or your screen width so the horizontal scrollbar will appear. After appearing horizontal scrolling bar, just add the below code before </head> tag on you page. Nothing to do the rest.

<script type='text/javascript'>
// Horizontal Scrolling Using Mouse Wheel
// Code From: www.dte.web.id/2013/02/event-mouse-wheel.html
(function() {
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.documentElement.scrollLeft -= (delta*100); // Multiplied by 40
document.body.scrollLeft -= (delta*100); // Multiplied by 40
e.preventDefault();
}
if (window.addEventListener) {
// IE9, Chrome, Safari, Opera
window.addEventListener("mousewheel", scrollHorizontally, false);
// Firefox
window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
// IE 6/7/8
window.attachEvent("onmousewheel", scrollHorizontally);
}
})();
</script>