CODEWITHSUNDEEP
javascriptcss
AIMEUR Amin
AIMEUR Amin

Reputation: 365

Change from vertical scroll to horizontal when section reached

I'm trying to make a website that has section aligned under each other, except for one section that I want it'sn content to be horizontally aligned and to be scrolled horizontally as well when that section is reached.

down below is what I could do, but both horizontal and vertically scrolling are working at the same time. So how do I detect that that section is reached and how to stop the vertical scrolling when the horizontal one is launched?

DEMO

var item = document.getElementsByTagName('MAIN')[0];

window.addEventListener('wheel', function(e) {

  var percent = 100 * item.scrollLeft / (item.scrollWidth - item.clientWidth);

  if (e.deltaY > 0) {
    item.scrollLeft += 100;
  } else item.scrollLeft -= 100;
});
body {
  padding: 0;
  margin: 0;
}

main {
  position: relative;
  width: 100vw;
  height: 100vh;
  -webkit-overflow-scrolling: touch;
}

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: nowrap;
  width: auto;
}

.wrapper>div {
  pointer-events: none;
  flex: 0 0 auto;
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.more {
  height: 100vh;
  width: 100vw;
  background-color: yellow;
}

.exmpl:-webkit-scrollbar {
  display: none;
}
<main style="overflow: scroll hidden;">
  <div class="wrapper">
    <div style="background-color:red"></div>
    <div class="exmpl" style="background-color:blue"></div>
  </div>
</main>
<div class='more'></div>

Upvotes: 3

Views: 1827

Answers (1)

AIMEUR Amin
AIMEUR Amin

Reputation: 365

I asked that a while ago and no one answered my question, so I guess opting for a library like scrollmagic is the best solution.

for reference purpose I'm pasting these exemples from codepen:

exemple1

$(function () { // wait for document ready
  
  var controller = new ScrollMagic.Controller();

  var horizontalSlide = new TimelineMax()
  // animate panels
  .to("#js-slideContainer", 1,   {x: "-20%"})   
  .to("#js-slideContainer", 1,   {x: "-40%"})
  .to("#js-slideContainer", 1,   {x: "-60%"})
  .to("#js-slideContainer", 1,   {x: "-80%"})


  // create scene to pin and link animation
  new ScrollMagic.Scene({
    triggerElement: "#js-wrapper",
    triggerHook: "onLeave",
    duration: "400%"
  })
    .setPin("#js-wrapper")
    .setTween(horizontalSlide)
    //.addIndicators() // add indicators (requires plugin)
    .addTo(controller);
  
  
  
});

exemple2

var controller = new ScrollMagic.Controller();

var scrollHorizontal = new TimelineLite()
  scrollHorizontal.to("#scrollHorizontal", 1, {x:'-100%'})

var horizontalScroll = new ScrollMagic.Scene({
      triggerElement: "#scrollHorizontal",
      triggerHook: 'onLeave',
      duration: 3000
    }).setPin("#scrollHorizontal").setTween(scrollHorizontal).addTo(controller);

Upvotes: 1

Related Questions