Javascript document.ontouchmove 和在 iOS 5 上滚动

document.ontouchmove and scrolling on iOS 5

提问by ghenne

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

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

-webkit-overflow-scroll:touch;

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

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

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.

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

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

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

回答by Brian Nickel

UpdatePer Alvaro's comment, this solution may no longer work as of iOS 11.3.

更新Per Alvaro 的评论，此解决方案可能不再适用于 iOS 11.3。

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

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

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

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

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

回答by 1nfiniti

The only issue with Brian Nickel's answer is that (as user1012566 mentioned) stopPropagation doesn't prevent bubbling when you hit your scrollable's boundaries. You can prevent this with the following:

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

回答by Andrew Plummer

For anyone trying to acheive this with PhoneGap, you can disable the elastic scrolling in the cordova.plist, set the value for UIWebViewBounceto NO. I hope that helps anyone spending ages on this (like i was).

对于任何试图与PhoneGap的，以达致这，你可以在禁用弹性滚动cordova.plist，对于设置的值UIWebViewBounce来NO。我希望能帮助任何人在这上面花费很多时间（就像我一样）。

回答by vladaman

ScrollFix seems to be perfect solution. I tested it and it works like a charm!

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

https://github.com/joelambert/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);
};

回答by user1012566

It was frustrating to discover a known problem with stopPropagation and native div scrolling. It does not seem to prevent the onTouchMove from bubbling up, so that when scrolling beyond the bounds of the div (upwards at the top or downwards at the bottom), the entire page will bounce.

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

More discussion hereand here.

更多讨论在这里和这里。