Crkva Kovacica Crkva Kovacica - 4 months ago 10
jQuery Question

What javascript code do i have to add to make this div scroll horizontally?

I made this page with three sections that have full width and height, but i don't know how to make them scroll horizontally and not vertically, i tried this source:
CSS-tricks: Horizontal scrolling but it doesn't work on my code...

Here is my code:



html, body {
height: 100%;
}
body {
margin: 0;
display: flex;
}
.element {
flex: 0 0 100%;
}
.element1 { background: pink; }
.element2 { background: lightgreen; }
.element3 { background: lightblue; }

<div class="element element1">Element #1</div>
<div class="element element2">Element #2</div>
<div class="element element3">Element #3</div>




Answer

The horizontal scrolling is working as expected, please check the code below. From your reference the demo uses a jquery plugin. You need to include jQuery and jQuery mousewheel plugin for it to work. :)

$(function() {

   $("body").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);
    
      event.preventDefault();

   });

});
html, body {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
}
.element {
  flex: 0 0 100%;
}
.element1 { background: pink; }
.element2 { background: lightgreen; }
.element3 { background: lightblue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>

<div class="element element1">Element #1</div>
<div class="element element2">Element #2</div>
<div class="element element3">Element #3</div>