iOS5 -webkit-overflow-scrolling 导致触摸事件停止工作 [英] iOS5 -webkit-overflow-scrolling causes touch events to stop working

查看：14
本文介绍了iOS5 -webkit-overflow-scrolling 导致触摸事件停止工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用 [-webkit-overflow-scrolling: touch;] 时，滚动区域效果很好，但它会导致触摸事件停止滚动区域之外的工作.有没有人有同样的问题?谁能给我一些关于这个新滚动功能的官方链接?

 <头><meta charset="UTF-8"><title>ios5滚动</title><style type="text/css">标题{背景:红色；宽度:300px；高度:44px；}.滚动{宽度:300px；高度:300px；背景:黄色；溢出:滚动；-webkit-overflow-scrolling:触摸；}</风格><身体><div id="容器"><标题><button onclick="alert('header');">不会工作吗?</button></标题><div class="scroll"><button onclick="alert('scroll');">它有效</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>

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

解决方案

我也有同样的问题，我也可以每次都复制.我有一个页面，当 iPad 的方向改变时，它会调整元素的大小以适应屏幕.如果在任何时候元素不再需要滚动，即使元素被调整回需要滚动的位置(例如，为我翻转回横向)，它也会在此后停止滚动.所以这绝对是一个错误，但我确实有一个解决方法:

在调整元素大小时，我将 -webkit-overflow-scrolling 重置为 auto，然后将其设置回 touch.但是，您必须在两者之间引入延迟(50 毫秒工作正常，没有尝试更低).所以我所做的是向元素添加了可滚动"的属性，并使用了下面的代码(使用 jQuery):

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

希望这有帮助！

when using [-webkit-overflow-scrolling: touch;], the scrolling area does work well, but it causes touch events stopping work out of the scrolling area. Is there anyone had the same problem? Who can give me some official links about this new scrolling feature?

        <!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: I have fixed this problem but I still no wonder the real reason. In my case, I have several sections in one web page, each section has a scroll area and a header, each time only one section is showed and use css3 animation combined with transform to switch sections. when add [-webkit-overflow-scrolling] in the scroll area of all sections, touch events stop working randomly, so I just add [-webkit-overflow-scrolling] in the section which is showed currently and remove it when the section is hidden. That works well but I still don't know what causes this problem.

解决方案

I have the same issue, and I can also replicate it every time. I have a page that resizes elements to fit the screen when the orientation of the iPad changes. If at any point the element no longer needs to scroll, it will stop doing so thereafter even if the element is resized back to where it needs to scroll (e.g. flipping back to landscape for me). So it's definitely a bug, but I do have a workaround:

When resizing the element, I'm resetting the -webkit-overflow-scrolling to auto, then setting it back to touch. However, you have to introduce a delay between the two (50ms is working fine, didn't try any lower). So what I did was added an attribute of "scrollable" to the elements, and used the code below (using jQuery):

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

Hope this helps!

这篇关于iOS5 -webkit-overflow-scrolling 导致触摸事件停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆