logo标签列表

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

ioscssscroll
4
以下代码在桌面和安卓手机上可以正常工作，但在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
@Ankur_009 谢谢你的负票。我正在尝试的是标题中所述的内容，我已经尝试过的是我提供的代码以及用于测试的jsfiddle链接。 - slash197
你故意在jsfiddle中省略了-webkit-scrolling-overflow规则吗？如果我使用您上面发布的代码，滚动在iOS中可以正常工作，但您的fiddle代码不行。 - Jesse
为什么要使用Android标签？ - Javier Delgado
2个回答
3

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移动设备上，滚动条不会显示，但可以通过向左或向右滑动来进行滚动。 - Varun Malhotra
0

我注意到你在代码中设置了 .row 类的预定义 width，从而确保每个具有该类的 <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`和`overflow: scroll`会破坏滚动功能

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接