Bedingt block scrollen/touchmove-event in mobile safari

iOS 5 erlaubt nun das native overflow: scroll-Unterstützung.

Was ich möchte zu tun ist, deaktivieren Sie die touchmove Veranstaltung für alles, was mit Ausnahme von Elementen, die die 'Scrollbar' Klasse oder für Ihre Kinder.

Aber ich kann nicht scheinen, um es zu arbeiten; dies ist, was ich arbeite mit dem unten:

<html>
<head>
<style>
.scrollable {
 height: 5em;
 overflow-y: scroll;
 -webkit-overflow-scrolling: touch;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>

//doesn't seem to work
var handleMove = function (e) {
  if (!$(e.target).parents().andSelf().hasClass('scrollable')) {
    e.preventDefault();
  }
};

document.addEventListener('touchmove', handleMove, true);

</script>
</head>
<body>
<div>
don't scroll if you drag here
</div>
<div class='scrollable'>
should be scrollable if you drag here
<ul>
<li>and here</li>
<li>and here</li>
<li>and here</li>
<li>and here</li>
<li>and here</li>
<li>and here</li>
<li>and here</li>
<li>and here</li>
</ul>
</div>
don't scroll if you drag here
</body>
</html>

InformationsquelleAutor | 2011-12-22

Ich weiß, es ist schon eine Weile her, seit Sie die Frage, aber ich hatte das gleiche Problem und ich habe deinen code als Grundlage für die Lösung des Problems. Also danke für die inspiration.

(Javascript + jQuery)

<script>
var handleMove = function (e) {
    var scrollable = false;
    var items = $(e.target).parents();
    $(items).each(function(i,o) {
        if($(o).hasClass("scrollable")) {
            scrollable = true;
        }
    });
    if(!scrollable)
        e.preventDefault();
};
document.addEventListener('touchmove', handleMove, true);
</script>

Oder weniger ausführlich, aber letztlich das gleiche Ergebnis (Kredit J Griffiths):

<script>
var handleMove = function (e) {
    if($(e.target).closest('.scrollable').length == 0) { e.preventDefault(); }
}
document.addEventListener('touchmove', handleMove, true);
</script>

Sollten Sie auch das folgende META-tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0,
  maximum-scale=1.0, user-scalable=no;" />

Ein leicht verständlicher Weise zu äußern den Inhalt der handleMove Funktion wäre if (!$(e.target).closest('.scrollable').length) { e.preventDefault(); }
Guter Vorschlag, ich soll aktualisieren diese Antwort früher als diese, aber so getan haben, jetzt. Dank

InformationsquelleAutor Scott

JavaScript-version, basierend auf Nevirs Antwort:

var initialY = null;
var nodeStack = [];
var $window = $(window);

$window.bind('touchstart', function(e) {
    initialY = e.originalEvent.pageY;
    nodeStack = $(e.target).parents().andSelf().filter(':not(body, html)').get().reverse();
    nodeStack = nodeStack.map(function(node) {
        return $(node);
    });
});

$window.bind('touchend touchcancel', function(e) {
    initialY = null;
    nodeStack = [];
});

$window.bind('touchmove', function(e) {

    if (!initialY) {
        e.preventDefault();
    }

    var direction = e.originalEvent.pageY - initialY;

    for (var i = 0; i < nodeStack.length; i +=1) {
        var $node = nodeStack[i];
        var nodeHeight = $node.height();
        var scrollHeight = $node[0].scrollHeight - 2;
        var nodeScrollTop = $node.scrollTop();

        if (scrollHeight > nodeHeight) {
            //the user is dragging the content up, and the element is already scrolled down a bit.
            var allowedUp = direction > 0 && nodeScrollTop > 0;

            //the user is dragging the content down, and the element is up a bit.
            var allowedDown = direction < 0 && nodeScrollTop < scrollHeight - nodeHeight;

            if (allowedUp || allowedDown) {
                return;
            }
        }
    }

    //disable drag
    e.preventDefault();
});

InformationsquelleAutor Fred Bergman

Wenn Sie schreiben, diese in jquery document.ready-Ereignis, es wird funktionieren.

$('body').on('touchmove', function (e) {
  if ($(e.target).closest("your_scrollable_div_selector").length == 0)
    e.preventDefault();
});

InformationsquelleAutor sems

1

Ich habe versucht, Scott ' s Antwort aber es hat nicht funktioniert auf meinem iphone iOS 5.1.1

Auch, dies ist besonders wichtig, wenn Sie einen webClip-app, Oh Mann, ich hoffe, dass iOS 6 wird es ein viewport-tag, der deaktiviert die auto-bounce

Meine version unten funktioniert (oder nicht) sowie Scott ' s Antwort oben, da es im wesentlichen nicht die gleiche Sache.

jQuery 1.7.2
```
        $(document).bind("touchmove",function(e){
            e.preventDefault();
        });
        $('.scrollable').bind("touchmove",function(e){
            e.stopPropagation();
        });
```
InformationsquelleAutor tim
0

Können wir die touchstart Veranstaltung statt touchmove Veranstaltung. Unter Einem Finger Ereignisse, die es sagt, dass keine Ereignisse gesendet werden, während eine Schwenk -, so touchmove zu spät sein kann.

Habe ich den Hörer zu dokumentieren, nicht Körper.
```
document.ontouchstart = function(e){ 
  e.preventDefault(); 
}
```
InformationsquelleAutor Pavan

-1

Hier ist eine (meist) funktionierende Lösung für das deaktivieren der vertikalen Bildlauf für alle, aber übergelaufen Elemente:

(CoffeeScript):

# Vertical scrolling behavior overrides.
#
# This disables vertical scrolling on the page for touch devices, unless the user is scrolling
# within an overflowed node.  This requires some finessing of the touch events.
#
# **NOTE:** This code ends up disabling bounce behavior if the user tries to scroll on a node that
# is already at its upper or lower limit.
window$   = $(window)
initialY  = null
nodeStack = []

# When a user begins a (potential) drag, we jot down positional and node information.
#
# The assumption is that page content isn't going to move for the duration of the drag, and that
# it would also be awkward if the drag were to change/stop part way through due to DOM
# modifications.
window$.bind 'touchstart', (evt) ->
  initialY  = evt.originalEvent.pageY
  nodeStack = $(evt.target).parents().andSelf().filter(':not(body, html)').get().reverse()
  nodeStack = nodeStack.map (node) -> $(node)

window$.bind 'touchend touchcancel', (evt) ->
  initialY  = null
  nodeStack = []

# We override the `touchmove` event so that we only allow scrolls in allowable directions,
# depending on where the user first began the drag.
window$.bind 'touchmove', (evt) ->
  return evt.preventDefault() if initialY == null
  # A positive direction indicates that the user is dragging their finger down, thus wanting the
  # content to scroll up.
  direction = evt.originalEvent.pageY - initialY

  for node$ in nodeStack
    nodeHeight    = node$.height()
    # For some reason, the node's scrollHeight is off by 2 pixels in all cases.  This may require
    # tweaking depending on your DOM.  Concerning.
    scrollHeight  = node$[0].scrollHeight - 2
    nodeScrollTop = node$.scrollTop()

    # If we have a scrollable element, we want to only allow drags under certain circumstances:
    if scrollHeight > nodeHeight
      # * The user is dragging the content up, and the element is already scrolled down a bit.
      return if direction > 0 and nodeScrollTop > 0
      # * And the reverse: the user is dragging the content down, and the element is up a bit.
      return if direction < 0 and nodeScrollTop < scrollHeight - nodeHeight

  # Otherwise, the default behavior is to disable dragging.
  evt.preventDefault()

Gibt es nicht einen einzigen coffeescript tag überall auf diese Frage noch hat jemand Fragen über coffeescript.
Das macht die Antwort nicht weniger gültig?
Ja, absolut.
js2coffee.org

InformationsquelleAutor Nevir

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.