Question

以下代码在桌面和Android移动设备上运行良好，但它不适用于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>

Answer 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/

Answer 2

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

如果是这样，您是否尝试通过设置固定的width或min-width属性（可能为百分比＆gt;）来强制始终将内容标记为滚动，类似于您上面所做的操作。 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

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

2 个答案: