无法在 ios 上的可滚动区域内创建可滚动区域答案

【问题标题】：Unable to create scrollable area inside a scrollable area on ios无法在 ios 上的可滚动区域内创建可滚动区域
【发布时间】：2018-01-31 08:45:54
【问题描述】：

以下代码在桌面和安卓手机上运行良好，但在 ios 上不运行。如果能帮助我找到正确的方向，我将不胜感激。

https://jsfiddle.net/slash197/047c4dj8/6/

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
.holder {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.content {
    width: 100%;
    height: 128px;
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
.row {
    width: 3000px;
    height: 100%;
    background-image: -webkit-linear-gradient(
        left,
        rgba(0, 0, 255, 0.0)   0%,
        rgba(0, 0, 255, 1.0) 100%
    );
}


<div class="holder">
    <div class="content">
        <div class="row"></div>
    </div>
    <div class="content">
        <div class="row"></div>
    </div>
    <div class="content">
        <div class="row"></div>
    </div>
    <div class="content">
        <div class="row"></div>
    </div>
    <div class="content">
        <div class="row"></div>
    </div>
    <div class="content">
        <div class="row"></div>
    </div>
</div>

【问题讨论】：

请解释一下您要做什么？你试过什么？
@Ankur_009 感谢您的反对票。我要做的是在标题中，我尝试的是我提供的代码以及 jsfiddle 链接来测试它。
您是否故意将 -webkit-scrolling-overflow 规则排除在 js fiddle 之外？如果我使用您在上面发布的代码，则滚动可以在 iOS 中正常工作，但是您的小提琴代码不会。
为什么是 Android 标签？

标签： ios css scroll

【解决方案1】：

IOS Safari 忽略百分比宽度，将其更改为 px，它将开始工作，检查下面的 fiddel 链接。

    <!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
            .holder {
                position: relative;
                width: 1000px;
                height: 100%;
                overflow-y: scroll;
                overflow-x: hidden;
       -webkit-overflow-scrolling-x: touch !important;
            }
            .content {
                width: 1000px;
                height: 128px;
        display:block;
        float:left;
                overflow-y: hidden;
                overflow-x: scroll;
        -webkit-overflow-scrolling-x: touch !important;
            }
            .row {
                width: 3000px;
                height: 100px;
        display:block;
        float:left;
                background-image: -webkit-linear-gradient(
                    left,
                    rgba(0, 0, 255, 0.0)   0%,
                    rgba(0, 0, 255, 1.0) 100%
                );
            }
        </style>
    </head>
    <body>
        <div class="holder">
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
        </div>
    </body>
</html>

https://jsfiddle.net/pe6t29kf/11/

【讨论】：

滚动条在 ios 移动设备上不可见，但可以通过向左或向右滑动来滚动。

【解决方案2】：

我注意到在您列出的代码中，您使用预定义的width 设置了.row 类，从而确保具有该类的每个<div> 元素都需要滚动。我假设它是失败的水平滚动，对吗？我没有 iPhone，但我注意到有人提到上面的代码适用于 iOS。是否可能在实际代码中动态生成需要水平滚动的内容？

如果是这样，您是否尝试通过设置固定的width 或min-width 属性（可能设置为> 100% 的百分比）来强制将内容始终标记为滚动？

<div class="holder">
    <div class="content">
        <div class="row" style="min-width: 101%"></div>
    </div>
</div>

我不是 iOS 方面的专家，但如果它涉及动态生成的内容，则问题可能是与此问题相关的 iOS 滚动怪癖。

iOS 9 `-webkit-overflow-scrolling:touch` and `overflow: scroll` breaks scrolling capability

【讨论】：