Div布局正在阻止从垂直滚动到水平滚动的转换。

Question

我使用这个：https://github.com/koggdal/scroll-converter将垂直滚动转换为水平滚动，但是当我尝试将它实现到代码上时，垂直滚动不会被转换为水平滚动。我正确地包含了脚本，我也正确地初始化了脚本，这不是问题所在。无论是#水平容器还是#滚动包装器的布局都存在一些问题，这阻碍了它的正常工作。

这是一个带有我的代码的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

您的布局需要在页面的子元素上进行水平滚动。这里的‘#滚动包装’。

在阅读插件代码后，乍一看，除了(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自定义滚动条的替代插件可以更多地控制Mous轮和滚动事件，而且它似乎处理了OSX魔术触控板/鼠标上的异常。

在主脚本 of 空灵主题上，您可以看到清晰的注释代码，并测试它是如何处理鼠标轮规范化的，您可以从它的布局中激发灵感，它的布局与您的预期结果类似。

请注意，我删除了您的iframes上的填充！这可能适合你的最终布局。但他们在这里看起来很流离失所..。