ios - iOS5 -webkit-overflow-scrolling causes touch events to stop working

Question

Welcome To Ask or Share your Answers For Others

ios - iOS5 -webkit-overflow-scrolling causes touch events to stop working

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

ios - iOS5 -webkit-overflow-scrolling causes touch events to stop working

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:43:55+0000

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!

Categories

ios - iOS5 -webkit-overflow-scrolling causes touch events to stop working

ios - iOS5 -webkit-overflow-scrolling causes touch events to stop working

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags