赞助商

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

发布时间:2019-07-11 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了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使触摸事件停止工作全部内容,希望文章能够帮你解决iOS5 -webkit-overflow-scrolling使触摸事件停止工作所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: