iOS 5 上的 document.ontouchmove 和滚动

Question

iOS 5 为 JavaScript/Web 应用程序带来了许多好东西。其中之一是改进的滚动。如果添加

-webkit-overflow-scroll:touch;

到文本区域元素的样式，则用一根手指即可很好地滚动。

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

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

但是，这会禁用新的滚动。

有谁有一个好方法来允许在文本区域内进行新的滚动，但不允许整个表单滚动？

Answer 1

Brian Nickel 的答案的唯一问题是（正如 user1012566 提到的）stopPropagation 并不能阻止当你到达可滚动边界时冒泡。您可以通过以下方法来防止这种情况：

elem.addEventListener('touchstart', function(event){
    this.allowUp = (this.scrollTop > 0);
    this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
    this.prevTop = null; 
    this.prevBot = null;
    this.lastY = event.pageY;
});

elem.addEventListener('touchmove', function(event){
    var up = (event.pageY > this.lastY), 
        down = !up;

    this.lastY = event.pageY;

    if ((up && this.allowUp) || (down && this.allowDown)) 
        event.stopPropagation();
    else 
        event.preventDefault();
});

Answer 2

对于尝试使用 PhoneGap 实现此目的的任何人，您可以在 cordova.plist 中禁用弹性滚动，将 UIWebViewBounce 的值设置为 NO。我希望这对那些在这方面花费了很长时间的人（就像我一样）有所帮助。

Answer 3

ScrollFix 似乎是完美的解决方案。我测试了它，它的效果就像一个魅力！

https://github.com/joelambert/ScrollFix

/**
 * ScrollFix v0.1
 * http://www.joelambert.co.uk
 *
 * Copyright 2011, Joe Lambert.
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

var ScrollFix = function(elem) {
    // Variables to track inputs
    var startY, startTopScroll;

    elem = elem || document.querySelector(elem);

    // If there is no element, then do nothing  
    if(!elem)
        return;

    // Handle the start of interactions
    elem.addEventListener('touchstart', function(event){
        startY = event.touches[0].pageY;
        startTopScroll = elem.scrollTop;

        if(startTopScroll <= 0)
            elem.scrollTop = 1;

        if(startTopScroll + elem.offsetHeight >= elem.scrollHeight)
            elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1;
    }, false);
};

Answer 4

发现 stopPropagation 和本机 div 滚动的已知问题令人沮丧。它似乎并不能阻止onTouchMove向上冒泡，这样当滚动超出div的边界（顶部向上或底部向下）时，整个页面都会弹起。

更多讨论此处< /a> 和此处。

Answer 5

更新每Alvaro 的评论，从 iOS 11.3 开始，此解决方案可能不再有效。

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

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

    e.preventDefault();
};

或者，这可以通过阻止事件到达文档级别来起作用。

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

编辑对于稍后阅读的任何人来说，替代答案确实有效并且更容易。