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

我使用的是：将垂直滚动转换为水平滚动，但当我尝试在代码中实现它时，垂直滚动并没有转换为水平滚动。我正确地包含了脚本，并且正确地初始化了脚本，这不是问题所在。“horizontalcontainer”或“scrolling wrapper”的布局肯定存在一些问题，这会妨碍其正常工作

这是我的代码的一个JSFIDLE，你看到我可能出错的地方了吗

（功能（）{
scrollConverter.activate（）；
}());
#水平容器{
z指数：0；
位置：固定；
左：0；
右：0；
排名：0；
底部：0；
宽度：100%；
身高：100%；
显示器：flex；
对齐项目：居中；
}
#滚动包装器{
溢出-x：自动；
溢出y：隐藏；
空白：nowrap；
文本对齐：居中；
保证金：0自动；
高度：60vh；
宽度：100vw；
-webkit溢出滚动：触摸；
-ms溢出样式：无；
排名：0；
底部：0；
左：0；
右：0；
}
.视频卡1{
左：2.5%；
右侧填充：2.5%；
显示：内联块；
位置：相对位置；
宽度：46%；
最高：50%；
转化：translateY（-50%）；
}
.视频卡{
右侧填充：2.5%；
显示：内联块；
位置：相对位置；
宽度：46%；
最高：50%；
转化：translateY（-50%）；
}

---

谢谢大家!

您的布局需要在页面的子元素上进行水平滚动。这里是“滚动包装器”

在阅读了插件代码之后，乍一看，除了（Google代码注意到事件处理程序是“被动的”…）之外，没有什么兼容性问题，这不是什么大问题。 但是已经有报道说这个插件不能处理滚动到一个元素中

所以我建议你选择一个类似的替代方案。 最好是在自托管环境中工作。 下面是您使用它的布局：

$（文档）.ready（函数（）{
$（“#滚动包装”）.mousewheel（函数（事件，增量）{
这个.scrollLeft-=（增量*30）；
event.preventDefault（）；
});
});
#水平容器{
z指数：0；
位置：固定；
左：0；
右：0；
排名：0；
底部：0；
宽度：100%；
身高：100%；
显示器：flex；
对齐项目：居中；
}
#滚动包装器{
溢出-x：自动；
溢出y：隐藏；
空白：nowrap；
文本对齐：居中；
保证金：0自动；
高度：60vh；
宽度：100vw；
-webkit溢出滚动：触摸；
-ms溢出样式：无；
排名：0；
底部：0；
左：0；
右：0；
}
.视频卡1{
左：2.5%；
右侧填充：2.5%；
显示：内联块；
位置：相对位置；
宽度：46%；
最高：50%；
转化：translateY（-50%）；
}
.视频卡{
右侧填充：2.5%；
显示：内联块；
位置：相对位置；
宽度：46%；
最高：50%；
转化：translateY（-50%）；
}
.ifrclass{
排名：0；
左：0；
宽度：100%；
身高：100%；
}
divpad先生{
/*填充：56.25%0*/
/*位置：相对位置*/
}

在这里用jQuery预加载：但是当你点击脚本附近选择加载方法时，你仍然可以加载Javascript框架……这把小提琴正在使用你的插件、jQuery和引导（都在左边的参考资料附近…）。当您单击包装器时，您的初始代码就会工作。你能给我们展示一下你的预期布局吗？因为有滚动包装和所有的填充物？在水平容器中有位置：固定；可能是（暂时的）帮助：shorturl.at/aCFGO@Bilel谢谢你调查此事，我真的很感激。预期的布局与我原来的小提琴一模一样，因为我需要所有东西都能响应，位置也一样。这里是我的原始代码以及您提供的正确插件资源的更新版本（我不认为我需要引导，所以我省略了它，但如果您确实认为我需要它，请解释原因）。我认为固定位置可能也是罪魁祸首，但移除它仍然无法解决问题。不知道这到底是什么。。。还有额外的填充，还有一个谷歌代码（youtube），它也可以下载。当您向我们展示一个正在工作的嵌入式视频时，我随时准备提供帮助。。。因为在首先解决这个问题之后，您可能会发现插件的其他问题。这里的重点是什么？您的布局、youtube或该插件？：）@比尔：我只删除了YouTube嵌入URL的结尾，因为它们根本不适用于这个问题。这里是一个带有“正在工作”嵌入式视频的JSFIDLE:）如果填充是导致插件无法工作的原因，您能否演示如何修改它以避免插件无法正常工作？再次感谢！这太好了，非常感谢！我不知道原来的插件无法滚动到元素中。我注意到这个jQuery鼠标滚轮插件的唯一问题是，当我使用触摸板滚动时，滚动速度的转换太快，无法控制。我假设它与鼠标滚轮配合使用效果非常好，但对于使用触摸板的用户来说，速度远远不够。我是否做错了什么/是否有一个解决方案，让那些将使用触控板而不是鼠标滚轮的用户使用？FWIW此处的滚动速度（）与触控板配合使用效果很好。这是另一个很长的故事：）多年来，他们一直在这里讨论这个问题，我认为它已经解决了。我无法测试，但这里有一个
<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%);
    }