JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrap">
<div id="container">
<div id="landingpage">
<p>Landing Page</p>
</div>
<div id="galone" class="vert"></div>
<div id="galtwo" class="vert"></div>
<div id="galthree" class="vert"></div>
<div id="galfour" class="vert"></div>
<div id="galfive" class="vert"></div>
<div id="galsix" class="vert"></div>
</div>
</div>
CSS
#wrap {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
#container {
position: relative;
height: 200px;
width: 1000px;
}
#landingpage {
height: 200px;
width: 400px;
background-color:blue;
position: relative;
float: left;
}
#galone {
height: 200px;
width: 100px;
background-color: green;
position: relative;
float: left;
}
#galtwo {
height: 200px;
width: 100px;
background-color: brown;
position: relative;
float: left;
}
#galthree {
height: 200px;
width: 100px;
background-color: pink;
position: relative;
float: left;
}
#galfour {
height: 200px;
width: 100px;
background-color: orange;
position: relative;
float: left;
}
#galfive {
height: 200px;
width: 100px;
background-color: purple;
position: relative;
float: left;
}
#galsix {
height: 200px;
width: 100px;
background-color:lightgreen;
position: relative;
float: left;
}
p {
margin-top: 90px;
}
JavaScript
var scroller = {};
scroller.e = document.getElementById("wrap");
if (scroller.e.addEventListener) {
scroller.e.addEventListener("mousewheel", MouseWheelHandler, false);
scroller.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else scroller.e.attachEvent("onmousewheel", MouseWheelHandler);
function MouseWheelHandler(e) {
console.log('scroll');
// cross-browser wheel delta
var e = window.event || e;
var delta = - 20 * (Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))));
var pst = $('#wrap').scrollLeft() + delta;
if (pst < 0) {
pst = 0;
} else if (pst > $('#container').width()) {
pst = $('#container').width();
}
$('#wrap').scrollLeft(pst);
return false;
}