CODEWITHSUNDEEP
javascriptscrollhorizontal-scrollingmousewheelpreventdefault
Alex Guerin
Alex Guerin

Reputation: 2386

JavaScript: Horizontal Scrolling with Mouse Wheel

Based off this: http://reader-download.googlecode.com/svn/trunk/full-page-horizontal-scrolling.html I cannot for the life of me get it to work in IE 10 in either standards or Quirks mode. I have a jsFiddle here but it only scrolls vertical: http://jsfiddle.net/dwsRC/1/

The scrolling code is 100% the same as the example site. I have tried other scrolling samples but preventDefault won't work. Adding jQuery doesn't help either.

In Visual Studio 2012 I get:

JavaScript runtime error: Object doesn't support property or method 'preventDefault'

HTML:

<div id="container">
    <div class="content c1">Hello, World!</div>
    <div class="content c2">Hello, World!</div>
    <div class="content c3">Hello, World!</div>
    <div class="content c1">Hello, World!</div>
    <div class="content c2">Hello, World!</div>
    <div class="content c3 last">Hello, World!</div>
</div>

CSS:

#container {
    height: 100%;
    width: 6000px;
    overflow: hidden;
}
.content {
    width: 895px;
    height: 675px;
    float:left;
    margin-right:50px;
}
.c1 {
    background-color: red;
}
.c2 {
    background-color: blue;
}
.c3 {
    background-color: green;
}

JS:

(function () {
    function scrollHorizontally(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        document.body.scrollLeft -= (delta * 40); // 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);
    }
})();

Upvotes: 1

Views: 4247

Answers (1)

hupsohl
hupsohl

Reputation: 46

This answer solved the problem for me, getting rid of the IE error and the horizontal scrolling worked.

Upvotes: 3

Related Questions