Styjun

I am working on a project, and I want to change my scrolling direction on the same as the image below and also make the width of the section the same with the following ID #left, #middle, #right below is my code

<style>
sectionmargin: 0;padding: 0;height: 100vh;
section:nth-of-type(1n) width: 100%;height: 100vh;background-color: #fc1c1c;
section:nth-of-type(2n) width: 100%;height: 100vh; background-color: #FE4B74;
section:nth-of-type(3n) width: 5840px;background-color: #fcfcfc;
#left, #middle, #right display: inline-block;
#left max-width:100%; width: 1920px; height: 100vh; background: blue; padding:10px;
#middle max-width:100%; width: 1920px; height: 100vh; background: green; padding:10px;
#right max-width:100%; width: 1920px; height: 100vh; background: yellow; padding:10px;
section:nth-of-type(4n) width: 100%;background-color: #e21cfc;
</style>

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

<section><p>Content Here</p></section>
<section><p>Content Here</p></section>
<section>
 <div id="left">Content Here</div> 
 <div id="middle">Content Here</div> 
 <div id="right">Content Here</div>
</section>

<section><p>Content Here</p></section>

<script>
scrollVert();
var scrollLeft=0;

function scrollVert() 
 $('html, body, *').off('mousewheel').mousewheel(function(e, delta) 
 this.scrollTop -= (delta * 40);
 e.preventDefault();
 setTimeout(function() 
 if ($(window).scrollTop() + $(window).height() == $(document).height())
 scrollHoriz();
 , 0)

 );

function scrollHoriz() 
 $('html, body, *').off('mousewheel').mousewheel(function(e, delta) 
 this.scrollLeft -= (delta * 40);
 e.preventDefault();
 scrollLeft=this.scrollLeft
 setTimeout(function() 
 if (scrollLeft == 0) scrollVert();
 , 0)
 );

</script>

Thanks for your help

I think the best soluction for your case would be ScrollMagic. They offer lots of scrolling features (very flexiabble) and other features such as lightweight and still responsive.

As for having some sectinos which scroll horizontally, they have this nice demo: http://atintell.com which does what you describe.

Hope that helps.