Search code examples
javascriptjquerycssscrollsmooth-scrolling

change vertical scrolling direction to horizontal

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 enter image description here

<style>
section{margin: 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>
Solution

  • 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.