Hortizantally scroll div using mouse wheel- javascript

Question

Just now, accidentally, i stumble upon http://www.quoplus.com/ .Here on some parts of the site it performs vertical scroll and in some parts it performs horizontal scroll on mouse wheel scroll. I liked the design very much and am planning to learn how to achieve this. I am very new to HTML and CSS and JAVASCRIPT.

This is the basic design of the site.

Till now I am able to scroll horizontally from d2 to d5 when mouse wheel is scrolled downwards.Scroll from d2 to d1 when mouse wheel is scrolled upwards. Now I want to learn how to go back to d2 if user scrolls upwards on d5. Also go to d3 if user scrolls downwards on d5.

Here is my code so far:

html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css1.css" rel="stylesheet" type="text/css">
</head>
    <body>
        <div id="D1">
            d1
        </div>
        <div id="gentags">
            <div id="D2">
            d2
            </div>
            <div id="D5">
            d5
            </div>
        </div>
        <div id="D3">
            d3
        </div>
    </body>
</html>

css

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

div
{
    height:100vh;
    width:100vw;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

#D1
{
    background-image: url(../Desktop/Unknown-1.png);
}

#D2
{
    background-image: url(../Desktop/Unknown-2.png);
}

#D3
{
    background-image: url(../Desktop/Unknown-4.png);
}

#D5
{
    background-image:url(../Desktop/Unknown-3.png);
}

#gentags
{
    width:200%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
}

#gentags div 
{
    width: 50%;
    float:left;
    white-space:nowrap;
    }

js

<script>
function scrollHorizontally(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        if(delta<0)
        {document.getElementById('D2').scrollLeft -= (delta*50); // Multiplied by 40
            document.body.scrollLeft -= (delta*50); // Multiplied by 40
            e.preventDefault();}
        else
        {

        }
}
if (document.getElementById('D2').addEventListener) {
    // IE9, Chrome, Safari, Opera
    document.getElementById('D2').addEventListener("mousewheel", scrollHorizontally, false);
    // Firefox
    document.getElementById('D2').addEventListener("DOMMouseScroll", scrollHorizontally, false);
}
// IE 6/7/8
else 
{document.getElementById('D2').attachEvent("onmousewheel", scrollHorizontally);
}

Is the approach I am using correct? If not, please guide me to the correct approach.

already asked before. here is the link [1]: http://stackoverflow.com/questions/2346958/how-to-do-a-horizontal-scroll-on-mouse-wheel-scroll — Krupesh Kotecha, Oct 05 '15 at 05:58
I know. From there only I learned how to do this much also. But that question does not solve my problem. Please read the question carefully before answering. — Babaji Shivram, Oct 05 '15 at 06:01
i give you the link just for refference. you can learn from it and solve your issue by your self. — Krupesh Kotecha, Oct 05 '15 at 06:05
Please explain what the problem is, what's not working? Error messages? — Ruan Mendes, Nov 12 '15 at 23:04

William · Answer 1 · 2015-11-12T13:36:50.910

I used HorzScrolling plugin for a similar project. You just need to setup the required plugin

From the example at CSS Tricks

The process:

Load jQuery and the Mouse Wheel plugin from here

<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

Attach mousewheel event to body. The "30" represents speed. preventDefault ensures the page won't scroll down.

 $(function() {
        $("body").mousewheel(function(event, delta) {
            this.scrollLeft -= (delta * 30);
            event.preventDefault();
        });
    });

Hortizantally scroll div using mouse wheel- javascript

1 Answers1