Breaking News: Grepper is joining You.com. Read the official announcement!

js scroll page horizontally with mouse wheel

FishBrawler answered on February 23, 2021 Popularity 8/10 Helpfulness 7/10

answer js scroll page horizontally with mouse wheel

js scroll page horizontally with mouse wheel

Comment

(function() {
    function scrollHorizontally(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        document.getElementById('yourDiv').scrollLeft -= (delta * 40); // Multiplied by 40
        e.preventDefault();
    }
    if (document.getElementById('yourDiv').addEventListener) {
        // IE9, Chrome, Safari, Opera
        document.getElementById('yourDiv').addEventListener('mousewheel', scrollHorizontally, false);
        // Firefox
        document.getElementById('yourDiv').addEventListener('DOMMouseScroll', scrollHorizontally, false);
    } else {
        // IE 6/7/8
        document.getElementById('yourDiv').attachEvent('onmousewheel', scrollHorizontally);
    }
})();

Popularity 8/10 Helpfulness 7/10 Language javascript

Source: stackoverflow.com

Tags: javascript mouse scroll

Link to this answer
Share Copy Link