在iOS 5上的document.ontouchmove和滚动

Question

iOS 5为JavaScript/Web Apps带来了许多好东西.其中之一是改进滚动.如果你添加

-webkit-overflow-scroll:touch;

对于textarea元素的样式,滚动可以用一根手指很好地工作.

但是有一个问题.为防止整个屏幕滚动,建议Web应用程序添加以下代码行:

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

但是,这会禁用新滚动.

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

Answer 1

您应该能够通过选择是否调用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();
};

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

Answer 2

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 3

对于任何试图与PhoneGap的,以达致这,你可以在禁用弹性滚动cordova.plist,对于设置的值UIWebViewBounce来NO.我希望这可以帮助任何人花这么多时间(就像我一样).

Answer 4

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);
};