Разметка Div предотвращает преобразование вертикальной прокрутки в горизонтальную прокрутку

Question

Я использую это: https://github.com/koggdal/scroll-converter для преобразования вертикальной прокрутки в горизонтальную, но когда я пытаюсь реализовать ее в своем коде, вертикальная прокрутка не преобразуется в горизонтальную. Я правильно включаю скрипт и правильно его инициализирую, это не проблема. Должна быть какая-то проблема с компоновкой #horizontcontainer или # scrolling-wrapper, которая мешает этому работать правильно.

Вот JSFiddle с моим кодом, вы видите, где я могу ошибаться?

https://jsfiddle.net/mwdhvzn8/

<div id="horizontalcontainer">
  <div id="scrolling-wrapper">
    <div class="videocard1">
      <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    </div>
    <div class="videocard">
      <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    </div>
    <div class="videocard">
      <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    </div>
    <div class="videocard">
      <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    </div>
    <div class="videocard">
      <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    </div>
  </div>
</div>

<script src="scroll-converter.min.js"></script>
<script>
  (function() {

    scrollConverter.activate();

  }());

</script>    

    #horizontalcontainer {
    z-index: 0;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    }

    #scrolling-wrapper {
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      text-align: center;
      margin: 0 auto;
      height: 60vh;
      width: 100vw;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: none;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .videocard1 {
      padding-left: 2.5%;
      padding-right: 2.5%;
      display: inline-block;
      position: relative;
      width: 46%;
      top: 50%;
      transform: translateY(-50%);
    }

    .videocard {
      padding-right: 2.5%;
      display: inline-block;
      position: relative;
      width: 46%;
      top: 50%;
      transform: translateY(-50%);
    }

Спасибо!

Answer 1

Ваш макет предполагает горизонтальную прокрутку на подэлементе страницы. Здесь # scrolling-wrapper.

После прочтения кода плагина, на первый взгляд, не было проблем с совместимостью, кроме (код Google замечает обработчик событий как «пассивный» ...), который не имеет большого значения. Но уже сообщалось здесь , что этот плагин не будет обрабатывать прокрутку в элемент.

Поэтому я предлагаю вам выбрать альтернативу, такую ​​как jQuery Колесо мыши, Лучше работать на jSfiddle или в автономной среде. И вот ваш макет, используя его:

$(document).ready(function () {
$("#scrolling-wrapper").mousewheel(function(event, delta) {

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

   });
});

#horizontalcontainer {
  z-index: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

#scrolling-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  text-align: center;
  margin: 0 auto;
  height: 60vh;
  width: 100vw;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.videocard1 {
  padding-left: 2.5%;
  padding-right: 2.5%;
  display: inline-block;
  position: relative;
  width: 46%;
  top: 50%;
  transform: translateY(-50%);
}

.videocard {
  padding-right: 2.5%;
  display: inline-block;
  position: relative;
  width: 46%;
  top: 50%;
  transform: translateY(-50%);
}

.ifrclass{
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.divpad{
    /*padding:56.25% 0 0 0;*/
    /*position:relative;*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
    <div id="horizontalcontainer">
      <div id="scrolling-wrapper">
        <div class="videocard page ">  
          <div class="divpad">  <iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" class="ifrclass" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>        
         </div>
        </div>
        <div class="videocard page ">  
          <div class="divpad">  <iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" class="ifrclass" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>        
         </div>
        </div>        
        <div class="videocard page ">  
          <div class="divpad">  <iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" class="ifrclass" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>        
         </div>
        </div> 
        <div class="videocard page ">  
          <div class="divpad">  <iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" class="ifrclass" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>        
         </div>
        </div>
        
      </div>
    </div>

[ОБНОВЛЕНИЕ] Другой альтернативный плагин под названием jQuery Пользовательская полоса прокрутки дает больше элементов управления для событий Mouswheel и прокрутки, и кажется, что он позаботился об исключениях в OSX magi c trackpad / mouse.

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

Обратите внимание, что я удалил отступ в ваших фреймах! Это может вписаться в ваш окончательный макет. Но здесь они выглядят смещенными ...