Свиток волшебный горизонтальный

Question

Я пытаюсь получить горизонтальную прокрутку с помощью плагина Scroll Magic, но я не могу заставить его работать должным образом.

https://jsfiddle.net/f02jn5b8/

var controller = new ScrollMagic.Controller();
new ScrollMagic.Scene({
        triggerElement: '#container',
  duration: 1000, // the scene should last for a scroll distance of 100px
 })
 .setPin(".scrollContainer") // pins the element for the the scene's duration
 .addTo(controller); // assign the scene to the controller

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
#container {
  overflow: hidden;
}
.scrollContainer {
  width: 1500px;
  height: 100vh;
}
.scrollContainer .content {
  height: 100%;
  width: 500px;
  float: left;
}
.scrollContainer .content.content1 {
  background-color: red;
}
.scrollContainer .content.content2 {
  background-color: green;
}
.scrollContainer .content.content3 {
  background-color: blue;
}
.scrollContainer::before {
  content: '';
  display: block;
  clear: both;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<div id="container">
  <div class="scrollContainer">
    <div class="content content1">
    
    </div>
    <div class="content content3">
    
    </div>
    <div class="content content2">
    
    </div>
  </div>
</div>

Я действительно не знаю, что еще мне не хватает, чтобы заставить его работать.

Чтобы получить более подробную информацию о функциональности, которая мне нужна, она должна прокручивать страницы по горизонтали при прокрутке страницы (вот пример: https://shop.mango.com/es/hombre/edits/andre-x-mango).

Кроме того, когда это исправлено, оно оставляет пустое пустое пространство, которое я не знаю, откуда оно берется (из плагина да, но не знаю причину).

Я надеюсь, что кто-то может помочь мне с этим.

Answer 1

Я полагаю, что проблема была со скрытым свойством переполнения контейнера. Удалите это свойство и установите контроллер scrollmagic работать горизонтально, и он будет работать.

редактировать

Я внес изменения в код, чтобы удовлетворить необходимое поведение - колесо мыши для горизонтальной прокрутки. Вышеприведенное утверждение все еще является постоянным.

var controller = new ScrollMagic.Controller({vertical: false});
new ScrollMagic.Scene({
        triggerElement: '#container',
  duration: 1000, // the scene should last for a scroll distance of 100px
 })
    .addIndicators()
 .setPin(".scrollContainer") // pins the element for the the scene's duration
 .addTo(controller); // assign the scene to the controller
 
 
     $(window).bind('mousewheel', function(event){
       var x = window.scrollX;
        event.preventDefault();
            if (event.originalEvent.wheelDelta >= 0) {
            window.scrollTo(x - 30, 0);
    }
    else {
    window.scrollTo(x + 30, 0);
    }
    });

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
#container {

}
.scrollContainer {
  width: 1500px;
  height: 100vh;
}
.scrollContainer .content {
  height: 100%;
  width: 500px;
  float: left;
}
.scrollContainer .content.content1 {
  background-color: red;
}
.scrollContainer .content.content2 {
  background-color: green;
}
.scrollContainer .content.content3 {
  background-color: blue;
}
.scrollContainer::before {
  content: '';
  display: block;
  clear: both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
 
<script src="js/app.js"></script>

<div id="container">
  <div class="scrollContainer">
    <div class="content content1">
    
    </div>
    <div class="content content3">
    
    </div>
    <div class="content content2">
    
    </div>
  </div>
</div>

Я обнаружил, что использование индикаторов в scrollmagic сэкономит вам много времени.