Html 如何使水平滚动导航模式的触摸和鼠标响应？

我想在响应网站的单行中使用水平滚动进行视频推荐，但有问题。容器类宽度大于col-12，即留出空间并在页面上显示水平滚动，当我添加更多视频时，空间会增加，我还使用了溢出属性。我对这个模式使用sass。

.aspx文件

 <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="pn-Product_Wrapper">
                    <div id="pnProduct" class="pn-Product">
                        <div id="pnProductContents" class="pn-Product_Contents">
                            <div class="pn-Product_Link" aria-selected="true">
                                <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

.pn-Product_Wrapper 
 {
position: relative;
padding: 0 11px;
box-sizing: border-box;
 }

.pn-Product {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
position: relative;
font-size: 0;
}

.pn-Product_Contents {
float: left;
-webkit-transition: -webkit-transform .2s ease-in-out;
transition: -webkit-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}

.pn-Product_Link {
text-decoration: none;
color: #888;
font-size: 1.2rem;
font-family: -apple-system, sans-serif;
display: -webkit-inline-box;
display: inline-flex;
-webkit-box-align: center;
align-items: center;
min-height: 44px;
border: 1px solid transparent;
padding: 0 11px;
}

---

您可以使用flexbox而不是float替换：

.pn-Product_Contents {
float: left;

据此：

.pn-Product_Contents {
display: flex;
flex-direction: column;

有关更多信息：

您可以参考我的代码笔

$（'.owl carousel'）.owlCarousel({
循环：对，
差额：25，
导航：是的，
导航文本：[
"",
""
],
自动播放：对，
自动播放暂停：对，
响应：{
0: {
项目：1
},
600: {
项目：3
},
1000: {
项目：5
}
}
})

.carousel包裹{
利润率：90像素自动；
填充：0.5%；
宽度：80%；
位置：相对位置；
}
/*固定转盘上的空白或闪烁项目*/
.猫头鹰转盘.项目{
位置：相对位置；
z指数：100；
-webkit背面可见性：隐藏；
}
.猫头鹰转盘.项目iframe{
宽度：100%；
}
/*端部固定*/
.owl导航>分区{
利润上限：-26px；
位置：绝对位置；
最高：50%；
颜色：#cdcbcd；
}
.猫头鹰导航一{
字体大小：52px；
}
.猫头鹰导航.猫头鹰导航{
左：-30px；
}
.猫头鹰导航。猫头鹰下一个{
右：-30px；
}

我认为如果你使用猫头鹰旋转木马，这可能是解决你问题的完美方法。不，我不能使用猫头鹰旋转木马。我必须在这里播放视频，所以它不起作用。你可以在这里使用猫头鹰旋转木马。。我在这里添加了一个片段。。请参阅