logo标签列表

在iOS7中，对于最初屏幕外元素，`-webkit-overflow-scrolling: touch`无法正常工作。

ioshtmlweb-applicationswebkitios7
22

既然GM种子已经发布，我们现在可以谈论它了！

看起来在iOS7中，“-webkit-overflow-scrolling: touch”出现了问题。 最初屏幕外的元素的触摸事件不触发（或在某些情况下不可靠）。

这里是一个例子：

<!DOCTYPE html><html>
    <head><title>TEST</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes" />
    <style>

        #scrollbox {
                position: fixed;
                top: 0px;
                width: 100%;
                height: 100%;
                overflow: scroll;
                -webkit-overflow-scrolling: touch;
        }

        .touchDiv {
            position: relative;
            width:100%;
            height:80px;
            background-color: #FFBBBB;
        }

        ul, li {
            text-indent: 0px;
            list-style: none;
            padding: 0px;
            margin: 0px;
        }

        li {
            padding-top: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #333;
        }

    </style>
    <script type="text/javascript">

        function onBodyLoad() {
            var touchDiv = document.getElementById("bottomDiv");
            touchDiv.ontouchstart = function(e) {
                alert("touched");
            };

            touchDiv = document.getElementById("topDiv");
            touchDiv.ontouchstart = function(e) {
                alert("touched");
            };
        }
    </script>
    </head>


    <body onload="onBodyLoad()">


        <div id='scrollbox'>
                <div id="topDiv" class="touchDiv">Fires an event when touched</div>
                <ul>
                    <li><a href='#' onclick="alert('1')">Link 1</a></li>
                    <li><a href='#' onclick="alert('3')">Link 3</a></li>
                    <li><a href='#' onclick="alert('4')">Link 4</a></li>
                    <li><a href='#' onclick="alert('5')">Link 5</a></li>
                    <li><a href='#' onclick="alert('6')">Link 6</a></li>
                    <li><a href='#' onclick="alert('7')">Link 7</a></li>
                    <li><a href='#' onclick="alert('8')">Link 8</a></li>
                    <li><a href='#' onclick="alert('9')">Link 9</a></li>
                    <li><a href='#' onclick="alert('10')">Link 10</a></li>
                    <li><a href='#' onclick="alert('11')">Link 11</a></li>
                    <li><a href='#' onclick="alert('12')">Link 12</a></li>
                    <li><a href='#' onclick="alert('13')">Link 13</a></li>
                    <li><a href='#' onclick="alert('14')">Link 14</a></li>
                    <li><a href='#' onclick="alert('15')">Link 15</a></li>
                    <li><a href='#' onclick="alert('16')">Link 16</a></li>
                    <li><a href='#' onclick="alert('17')">Link 17</a></li>
                    <li><a href='#' onclick="alert('18')">Link 18</a></li>
                    <li><a href='#' onclick="alert('19')">Link 19</a></li>
                    <li><a href='#' onclick="alert('20')">Link 20</a></li>
                    <li><a href='#' onclick="alert('21')">Link 21</a></li>
                    <li><a href='#' ontouchstart="alert('22')">Link 22</a></li>
                </ul>
                <div id="bottomDiv" class="touchDiv">Fires an event when touched 2</div>

        </div>

</body>

我猜这会破坏大多数移动优化的网络应用程序。

上述代码有任何问题吗？还有没有解决方法？

（我已经向苹果报告了一个错误-一段时间以前，但没有得到回复）

1
似乎这个问题有一段历史了：https://dev59.com/jGsz5IYBdhLWcg3wn5ba?rq=1 - 尽管是稍微不同的问题。 - Nick Hingston
2个回答
30

看起来在苹果开发者论坛上有一个解决此问题的方法。

非常感谢Baicoianu先生。

基本上，您需要在父滚动div上监听触摸事件。因此，在我的情况下，需要添加：

document.getElementById("scrollbox").addEventListener('touchstart', function(event){});

添加到onBodyLoad函数中。

我猜这可能是一些事件传播问题，可以通过在更高的层次上监听来解决。

1
当应用时，这在我的网站上引起了一些有趣的行为。某些图像无法加载（仅在iOS设备上）。我无法解释它，但我能够隔离这种行为。 - Grant H.
1
很高兴你觉得我的回答有用！我之前向他们提交了一个Radar错误报告 - 如果更多的开发者提交这个错误，或许它会从苹果公司获得更高的优先级。 - Nick Baicoianu
这个解决方案对我很有效。当然，我想要作为目标的元素深度嵌套在父元素中 - 因此事件需要通过许多级别向上冒泡，直到到达父滚动div。我想知道这种方法的性能影响是什么？你有任何想法吗？ - mattstuehler
这是一个奇怪的黑客技巧。我看不出它可能会引起什么副作用。这些解决方法通常是许多Web应用程序破损和行为有点奇怪的原因。 - Timo Ernst
或许是因为浏览器本身存在缺陷，所以需要一个解决方法。副作用应该很小……我们只是在监听事件并忽略响应。 - Nick Hingston
显示剩余2条评论
7

以上答案对我非常有效。这是上述修复程序的jQuery版本：

$('#scrollbox').on('touchstart', function(event){});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接