`-webkit-overflow-scrolling：touch`打破了iOS7中最初的屏幕外元素

本文介绍了`-webkit-overflow-scrolling：touch`打破了iOS7中最初的屏幕外元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

看到转基因种子已被释放，我们现在可以谈论它！

看起来像在iOS7中-webkit-overflow-scrolling：touch已损坏。触摸事件最初在屏幕外的元素不会触发（或者在某些情况下不可靠）。

以下是一个示例：

 <！DOCTYPE html>< html> 
< head>< title> TEST< / title> 
< meta name =viewportcontent =width = device-width，initial-scale = 1.0> 
< meta name =apple-mobile-web-app-capablecontent =yes/> 
< style> 
 
 #scrollbox {
 position：fixed; 
 top：0px; 
宽度：100％; 
身高：100％; 
 overflow：scroll; 
 -webkit-overflow-scrolling：touch; 
} 
 
 .touchDiv {
 position：relative; 
宽度：100％; 
 height：80px; 
 background-color：#FFBBBB; 
} 
 
 ul，li {
 text-indent：0px; 
 list-style：none; 
填充：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 =topDivclass =touchDiv>触摸时触发事件< / div> 
< ul> 
< li>< a href ='＃'onclick =alert（'1'）>链接1< / a>< / li> 
< li>< a href ='＃'onclick =alert（'3'）>连结3< / a>< / li> 
< li>< a href ='＃'onclick =alert（'4'）>链接4< / a>< / li> 
< li>< a href ='＃'onclick =alert（'5'）>链接5< / a>< / li> 
< li>< a href ='＃'onclick =alert（'6'）>链接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'）>链接11< / a>< / li> 
< li>< a href ='＃'onclick =alert（'12'）> Link 12< / a>< / li> 
< li>< a href ='＃'onclick =alert（'13'）>连结13< / a>< / li> 
< li>< a href ='＃'onclick =alert（'14'）>链接14< / a>< / li> 
< li>< a href ='＃'onclick =alert（'15'）> Link 15< / a>< / li> 
< li>< a href ='＃'onclick =alert（'16'）>链接16< / a>< / li> 
< li>< a href ='＃'onclick =alert（'17'）>链接17< / a>< / li> 
< li>< a href ='＃'onclick =alert（'18'）>连结18< / a>< / li> 
< li>< a href ='＃'onclick =alert（'19'）>链接19< / a>< / li> 
< li>< a href ='＃'onclick =alert（'20'）>链接20< / a>< / li> 
< li>< a href ='＃'onclick =alert（'21'）>链接21< / a>< / li> 
< li>< a href ='＃'ontouchstart =alert（'22'）>链接22< / a>< / li> 
< / ul> 
< div id =bottomDivclass =touchDiv>触摸时触发事件2< / div> 
 
< / div> 
 
< / body>

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

上述代码的任何问题？和/或是否有任何解决方法？

（前一段时间我已经提出了一个与苹果的错误，并且没有回应）

解决方案

看起来像是在

非常感谢Baicoianu先生。

基本上你需要在父滚动div上监听触摸事件。所以在我的情况下添加：

$ p $ document.getElementById（scrollbox）。addEventListener（'touchstart'，function（event）{ }）;

加入到onBodyLoad函数中。

I猜猜这是一些事件传播问题，通过在更高级别上收听解决。

Seeing as GM seed has been released, we can talk about it now!

Looks like in iOS7 "-webkit-overflow-scrolling: touch" is broken. touch events for elements that are initially off screen do not fire (or in some cases are just unreliable).

Here is an example:

<!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>

I guess this will break the majority of mobile optimised web apps.

Any issues with the above code? And/or are there any workarounds?

(I have already raised a bug with apple - some time ago, and no response)

解决方案

Looks like there is a workaround to this problem on apple dev forums

So many thanks to Mr Baicoianu.

Basically you need to listen to touch events on the parent scroll div. So in my case add:

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

to the onBodyLoad function.

I guess this is some event propagation issue, solved by listening at a higher level.

这篇关于`-webkit-overflow-scrolling：touch`打破了iOS7中最初的屏幕外元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Touch

`-webkit-overflow-scrolling：touch`打破了iOS7中最初的屏幕外元素

问题描述