在移动设备Android，iOS中，不能完美控制溢出X滚动容器内的范围输入

问题描述

我使水平滚动容器溢出-x：滚动并在其中输入一些范围输入。

<style>
.horiCont {
    white-space: Nowrap;
    overflow-x: scroll;
}
.rangCont {
    display: inline-block;
    white-space: normal;
    text-align: center;
}
</style>
<div class="horiCont">
    <div class="rangCont">
        Range Input</br>
        <input type="range" min="0" max="200" value="100">
    </div>
    <div class="rangCont">
        Range Input</br>
        <input type="range" min="0" max="200" value="100">
    </div>
    <div class="rangCont">
        Range Input</br>
        <input type="range" min="0" max="200" value="100">
    </div>
    <div class="rangCont">
        Range Input</br>
        <input type="range" min="0" max="200" value="100">
    </div>
    <div class="rangCont">
        Range Input</br>
        <input type="range" min="0" max="200" value="100">
    </div>
    <div class="rangCont">
        Range Input</br>
        <input type="range" min="0" max="200" value="100">
    </div>
</div>

现在，您可以在计算机/桌面浏览器中轻松控制这些范围。但是，如果您尝试在移动设备（Android / iOS）中使用范围，则当您尝试在范围内滑动时，它会滚动我的“ horiCont。您不能在移动设备中完美地使用这些范围。

现在我该怎么做才能尝试通过在“ rangCont” div中使用范围来停止滚动“ horiCont”？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html overflow scroll