在iOS 5上的document.ontouchmove和滚动 [英] document.ontouchmove and scrolling on iOS 5

问题描述

iOS 5为JavaScript / Web Apps带来了许多不错的功能。其中之一是改进滚动。如果你添加

iOS 5 has brought a number of nice things to JavaScript/Web Apps. One of them is improved scrolling. If you add

-webkit-overflow-scroll:touch;

到textarea元素的样式，滚动可以很好地用一根手指。

to the style of a textarea element, scrolling will work nicely with one finger.

但是有一个问题。为防止整个屏幕滚动，建议网络应用添加以下代码行：

But there's a problem. To prevent the entire screen from scrolling, it is recommended that web apps add this line of code:

document.ontouchmove = function(e) {e.preventDefault()};

然而，这会禁用新的滚动。

This, however, disables the new scrolling.

有没有人有一个很好的方法来允许在textarea中进行新的滚动，但不允许整个表单滚动？

Does anyone have a nice way to allow the new scrolling within a textarea, but not allow the whole form to scroll?

推荐答案

您应该能够通过选择是否调用preventDefault来允许滚动。例如，

You should be able to allow scrolling by selecting whether or not preventDefault is called. E.g.,

document.ontouchmove = function(e) {
    var target = e.currentTarget;
    while(target) {
        if(checkIfElementShouldScroll(target))
            return;
        target = target.parentNode;
    }

    e.preventDefault();
};

或者，这可能会阻止事件达到文档级别。

Alternatively, this may work by preventing the event from reaching the document level.

elementYouWantToScroll.ontouchmove = function(e) {
    e.stopPropagation();
};

编辑对于稍后阅读的人来说，备用答案确实有效更容易。

Edit For anyone reading later, the alternate answer does work and is way easier.

这篇关于在iOS 5上的document.ontouchmove和滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！