Conditionnellement bloc de défilement/touchmove événement dans le navigateur safari mobile

iOS 5 permet maintenant de native overflow: scroll.

Ce que je voudrais faire est de désactiver le touchmove événement pour tout, sauf les éléments qui ont le défilement de la classe ou de leurs enfants.

Mais je n'arrive pas à le faire fonctionner; c'est ce que j'ai travaillé avec ci-dessous:

<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>

OriginalL'auteur | 2011-12-22

  1. 15

    Je sais, ça fait un moment depuis que vous avez posé la question, mais j'ai eu le même problème et j'ai utilisé votre code comme base pour résoudre le problème. Donc merci pour l'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>

    Ou moins détaillé, mais en fin de compte le même résultat (crédit J Griffiths):

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

    Vous devez également inclure la balise META suivante.

    <meta name="viewport" content="width=device-width, initial-scale=1.0,
  maximum-scale=1.0, user-scalable=no;" />
    Un peu plus laconique façon d'exprimer le contenu de la handleMove fonction serait if (!$(e.target).closest('.scrollable').length) { e.preventDefault(); }
    Bonne suggestion, j'ai voulu mettre à jour cette réponse plus tôt que cela, mais avez fait jusqu'à maintenant. Merci

    OriginalL'auteur Scott

  2. 3

    Version JavaScript basé sur Nevirs réponse:

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

    OriginalL'auteur Fred Bergman

  3. 2

    Si vous écrivez ce jquery dans le document.prête cas, il va travailler. 

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

    OriginalL'auteur sems

  4. 1

    J'ai essayé de Scott réponse, mais il ne fonctionne pas sur mon iphone iOS 5.1.1

    Aussi, cela est particulièrement important si vous êtes à la construction d'un webClip de l'app, mince j'espère iOS 6 va permettre à une fenêtre d'affichage de la balise qui désactive l'auto-bounce

    Ma version ci-dessous fonctionne (ou ne pas) ainsi que Scott est la réponse ci-dessus, comme il le fait essentiellement la même chose.

    jQuery 1.7.2

            $(document).bind("touchmove",function(e){
e.preventDefault();
});
$('.scrollable').bind("touchmove",function(e){
e.stopPropagation();
});

    OriginalL'auteur tim

  5. 0

    Nous pouvons utiliser la évènements touchstart de l'événement au lieu de touchmove événement. En vertu de l'Un Doigt Événements, il dit que non, les événements sont envoyés pendant une casserole, afin touchmove peut-être trop tard.

    J'ai ajouté le port d'écoute du document, pas le corps.

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

    OriginalL'auteur Pavan

  6. -1

    Voici une (principalement) la solution de travail pour désactiver le défilement vertical pour tous, mais débordé éléments:

    (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()
    Il n'y a pas un seul coffeescript balise n'importe où sur cette question, ni personne n'a demander de coffeescript.
    Est-ce que donner la réponse tout de moins en moins valable?
    Oui, absolument.
    js2coffee.org

    OriginalL'auteur Nevir