iOS5 -webkit-overflow-scrolling使触摸事件停止工作

当使用[-webkit-overflow-scrolling：touch;]时,滚动区域运行正常,
但是它会导致触摸事件停止滚动区域的工作.
有没有人有同样的问题？谁能给我一些关于这个新的滚动功能的官方链接？

<!DOCTYPE html>
    <html>
    <head>
    <Meta charset="UTF-8">
    <title>ios5 scroll</title>
    <style type="text/css">
    header {
        background: red;
        width: 300px;
        height:44px;
    }
    .scroll {
        width: 300px;
        height:300px;
        background: yellow;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }
    </style>
    </head>
    <body>
    <div id="container">
        <header>
            <button onclick="alert('header');">won't work?</button>
        </header>
        <div class="scroll">
            <button onclick="alert('scroll');">It works</button>
            <div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
            <div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
            <div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
        </div>
    </div> 
    </body>
    </html>

2011-12-27：我已经解决了这个问题,但我还是不知道真正的原因.
在我的情况下,我在一个网页中有几个部分,每个部分都有一个滚动区域和一个标题,每次只显示一个部分,并使用css3动画结合转换切换部分.当在所有部分的滚动区域中添加[-webkit-overflow-scrolling]时,触摸事件会随机停止工作,所以我只在当前显示的部分添加[-webkit-overflow-scrolling],当部分隐.这很好,但我仍然不知道是什么原因导致这个问题.

解决方法

我有同样的问题,我也可以每次复制它.当iPad的方向改变时,我有一个页面来调整元素的大小以适应屏幕.如果在任何时候元素不再需要滚动,那么即使元素被重新调整到需要滚动的位置(例如,为我翻转回景观),它也将停止.所以这绝对是一个bug,但是我有一个解决方法：

调整元素大小时,我将-webkit-overflow-scrolling重置为auto,然后将其重新设置为触摸.但是,你必须介绍两者之间的延迟(50ms工作正常,没有尝试任何降低).所以我做的是添加了一个“scrollable”属性到元素,并使用下面的代码(使用jQuery)：

$("[scrollable]").css("-webkit-overflow-scrolling","auto");
window.setTimeout(function () { $("[scrollable]").css("-webkit-overflow-scrolling","touch") },100);

希望这可以帮助！

iOS5 -webkit-overflow-scrolling使触摸事件停止工作

解决方法

猜你在找的iOS相关文章