Comment faire pour désactiver la bande de caoutchouc dans iOS web apps?

Ce:

$('body').on('touchmove', function(e) { e.preventDefault(); });

Fonctionne, mais va désactiver le défilement à travers l'ensemble de la page, ce qui est loin d'être idéale.

Ce:

$('*').on('touchstart', function(e){
    var element = $(this).get(0);

    if ( element.scrollTop <= 0 )                                           element.scrollTop = 1;
    if ( element.scrollTop + element.offsetHeight >= element.scrollHeight ) element.scrollTop = element.scrollHeight - element.offsetHeight - 1;
});

Fonctionne sur les pages qui ont une zone de défilement. Cependant, quand il n'y a rien à faire défiler il montrera à nouveau la bande de caoutchouc.

Donc ma question:

Comment pouvez-vous désactiver la bande de caoutchouc en effet et toujours conserver la -webkit-overflow-scrolling zones de défilement?

[Mise à jour]

Meilleure Solution

Désactiver le défilement sur tous les non-défilement des éléments tels qu'une barre d'onglet ou une barre de navigation.

anElement.addEventListener('touchmove', function( event ){ event.preventDefault() };

Attacher un gestionnaire de défilement pour le défilement des éléments comme le contenu principal.

anElement.addEventListener('touchstart', function( event ){
        if( this.scrollTop === 0 ) {
            this.scrollTop += 1;
        } else if( this.scrollTop + this.offsetHeight >= this.scrollHeight ) {
            this.scrollTop -= 1;
        }
}

J'ai exactement la même question!
Je suis également à la recherche d'une réponse. Sur le bureau Safari elle aide à fixer les body {overflow:hidden; height: 100%;}mais qui ne fonctionne pas sur iOS.
Juste par curiosité, pourquoi voudriez-vous pour le désactiver?
Pour la simple raison qu'il se sent plus comme une application native.

InformationsquelleAutor Mark | 2012-04-27

30

A couru dans le même problème récemment avec un SPA où l' <body> de caoutchouc de la bande a été atteinte à l'expérience, mais j'avais besoin de faire défiler les sous-domaines. Merci beaucoup pour dSquared suggestions, comme la Méthode 1 qui a le mieux fonctionné pour moi. Voici ma petite extension de sa suggestion que j'ai mis en œuvre dans un projet de travail qui attend tout le chemin jusqu'à l'arbre pour trouver tous les éléments (et pas seulement les divs) qui ont un .scroll classe à ce sujet:
```
//Prevent rubber-banding of the body, but allow for scrolling elements
$('body').on('touchmove', function (e) {
    var searchTerms = '.scroll, .scroll-y, .scroll-x',
        $target = $(e.target),
        parents = $target.parents(searchTerms);

    if (parents.length || $target.hasClass(searchTerms)) {
        //ignore as we want the scroll to happen
        //(This is where we may need to check if at limit)
    } else {
        e.preventDefault();
    }
});
```
Et voici ce que le CSS ressemble à:
```
body {
    height: 100%;
    overflow: hidden;
}
.scroll, .scroll-y, .scroll-x {
    -webkit-overflow-scrolling: touch;
}
.scroll > *, .scroll-y > *, .scroll-x > * {
    -webkit-transform : translateZ(0);
}
.scroll { overflow: auto; }
.scroll-y { overflow-y: auto; }
.scroll-x { overflow-x: auto; }
```
Vous avez seulement besoin d'une bibliothèque (jQuery ou Zepto) et vous obtenez natif de défilement avec de l'élan et pas en caoutchouc de la bande sur le corps. Aussi, j'ai ajouté les translateZ de réparer certains problèmes que j'ai eu avec des éléments de disparaître pendant le défilement et il peut être utilisé pour GPU pour accélérer vos éléments.

MAIS (et c'est un grand "mais"), comme dSquared, la page entière en caoutchouc-bandes lorsque le défilement de l'élément est à sa limite et tenté de faire défiler plus. Personnellement, je considère cela comme un échec, donc je vais continuer à travailler sur elle, je voulais juste à la hauteur sur le fait d'essayer de comprendre cela. Ajouter un contrôle sur les lignes de l'OP du code pourrait être la réponse, mais je n'ai pas essayé.

Mise à JOUR (10/7/12):

Après beaucoup de travail, j'ai obtenu le code suivant fonctionne parfaitement dans iOS6 (ne l'ai pas testé autre chose). Pas de caoutchouc des bandes sur le corps, pas plus de questions quand à la limite de la zone de défilement, et il est natif de défilement de la performance tout au long de. C'est évidemment beaucoup plus de code qu'à l'origine, mais je pense que cela va donner le comportement le plus proche de l'OP objectifs.
```
(function registerScrolling($) {
var prevTouchPosition = {},
scrollYClass = 'scroll-y',
scrollXClass = 'scroll-x',
searchTerms = '.' + scrollYClass + ', .' + scrollXClass;
$('body').on('touchstart', function (e) {
var $scroll = $(e.target).closest(searchTerms),
targetTouch = e.originalEvent.targetTouches[0];
//Store previous touch position if within a scroll element
prevTouchPosition = $scroll.length ? { x: targetTouch.pageX, y: targetTouch.pageY } : {};
});
$('body').on('touchmove', function (e) {
var $scroll = $(e.target).closest(searchTerms),
targetTouch = e.originalEvent.targetTouches[0];
if (prevTouchPosition && $scroll.length) {
//Set move helper and update previous touch position
var move = {
x: targetTouch.pageX - prevTouchPosition.x,
y: targetTouch.pageY - prevTouchPosition.y
};
prevTouchPosition = { x: targetTouch.pageX, y: targetTouch.pageY };
//Check for scroll-y or scroll-x classes
if ($scroll.hasClass(scrollYClass)) {
var scrollHeight = $scroll[0].scrollHeight,
outerHeight = $scroll.outerHeight(),
atUpperLimit = ($scroll.scrollTop() === 0),
atLowerLimit = (scrollHeight - $scroll.scrollTop() === outerHeight);
if (scrollHeight > outerHeight) {
//If at either limit move 1px away to allow normal scroll behavior on future moves,
//but stop propagation on this move to remove limit behavior bubbling up to body
if (move.y > 0 && atUpperLimit) {
$scroll.scrollTop(1);
e.stopPropagation();
} else if (move.y < 0 && atLowerLimit) {
$scroll.scrollTop($scroll.scrollTop() - 1);
e.stopPropagation();
}
//If only moving right or left, prevent bad scroll.
if(Math.abs(move.x) > 0 && Math.abs(move.y) < 3){
e.preventDefault()
}
//Normal scrolling behavior passes through
} else {
//No scrolling /adjustment when there is nothing to scroll
e.preventDefault();
}
} else if ($scroll.hasClass(scrollXClass)) {
var scrollWidth = $scroll[0].scrollWidth,
outerWidth = $scroll.outerWidth(),
atLeftLimit = $scroll.scrollLeft() === 0,
atRightLimit = scrollWidth - $scroll.scrollLeft() === outerWidth;
if (scrollWidth > outerWidth) {
if (move.x > 0 && atLeftLimit) {
$scroll.scrollLeft(1);
e.stopPropagation();
} else if (move.x < 0 && atRightLimit) {
$scroll.scrollLeft($scroll.scrollLeft() - 1);
e.stopPropagation();
}
//If only moving up or down, prevent bad scroll.
if(Math.abs(move.y) > 0 && Math.abs(move.x) < 3){
e.preventDefault();
}
//Normal scrolling behavior passes through
} else {
//No scrolling /adjustment when there is nothing to scroll
e.preventDefault();
}
}
} else {
//Prevent scrolling on non-scrolling elements
e.preventDefault();
}
});
})(jQuery);
```
- J'ai probablement passé environ deux mois sur ce problème, mais est allé totalement dans la mauvaise voie. YTMND.
- Attendez! J'ai parlé trop vite. Si vous essayez de faire glisser votre doigt vers le haut sur un parchemin x élément, ça va encore ruban malheureusement. 🙁
- Soumis une modification. N'hésitez pas à essayer.
- Incroyable! Merci!
- Je suis sur un ipad (pas la version 6) et j'ai mis le défilement de la classe y sur une boîte de dialogue. Elle l'empêche de caoutchouc de baguage, mais pas d'élastique en bas. Savoir hwo de résoudre ce problème?
- Bien que cela semble améliorer le problème, je peux toujours forcer le corps à la bande de caoutchouc sans trop d'effort en tirant sur les sous-domaines.
- C'est absolument superbe. J'ai été en utilisant github.com/pinadesign/overscroll, mais un seul problème avec cela est que vous ne peut pas commencer une touche de défilement à partir d'un textarea, donc un formulaire avec grand textareas il devient inutilisable. Merci à vous tous.
- Salut, j'ai du mal à le faire fonctionner, il me manque quelque chose mais vous ne savez pas quoi? J'ai copié le css de la partie dans le, ont ajouté le nom de la classe de défilement-y pour la div que je veux faire défiler et ajouté le script en bas de mon pied de page, il arrête la bande de caoutchouc en effet, mais ne me permet pas de faire défiler? les idées de ce que je fais mal?
- Je l'ai fait en IOS7, tout fonctionne sauf que je rencontre quelques vacille à la limite, mais seulement sur la première fois. Par exemple. 1. Faites défiler vers le bas - va au-delà des limites 2. Faites défiler vers le bas - les séjours dans les limites 3. Faites - va au-delà des limites 4. Faites défiler vers le bas - va au-delà des limites de 5. Faites défiler vers le bas - va au-delà des limites 6. Faites défiler vers le bas - les séjours dans les limites 7. Faites défiler vers le bas - les séjours dans les limites. Toutes les suggestions?
- Ce qui semble tuer select2 débordant sélectionnez les cases si la page elle-même ne déborde pas... sans doute facilement modifié si!
InformationsquelleAutor Tim Hall
8

Malheureusement, il n'y a pas de formule magique pour résoudre ce problème tant que la bande de caoutchouc de défilement sur le navigateur Safari Mobile est une fonction intégrée de 'fonction' du navigateur lui-même. En utilisant un mécanisme de défilement par défaut fourni par le navigateur, vous allez vous retrouver avec le caoutchouc de la bande de défilement à un certain degré.

Il y a deux façons je suggère de s'attaquer à ce:

Méthode 1

Se lier à la touchmove de l'événement sur la </body> élément et de vérifier la cible de la touchmove événement pour voir si vous le souhaitez, feu ou aime pas tellement:

HTML
```
<div class="scroll">
<p>...</p>
<p>...</p>
</div>
```
JS
```
$('body').on('touchmove', function(e) {
//this is the node the touchmove event fired on
//in this example it would be the </p> element
target = e.target;
//we need to find the parent container
//we get it like so; assumes div as parent
parent = $(e.target).closest('div');
//check if the parent is a scroll window by class //
if ($(parent).hasClass('scroll')){
//ignore as we want the scroll to happen
} else {
e.preventDefault();
}
});
```
JSFiddle Exemple Ici

Cette méthode utilise le défilement par défaut du navigateur, il a cependant l'inconvénient que vous aurez encore le caoutchouc de la bande de la vitesse de défilement en haut ou en bas du parchemin </div>.

Méthode 2

Se lier à la touchmove cas de la </body> élément comme avant, mais dans ce cas nous empêcher Tous touchmove événements et de compter sur l'excellent iScroll 4 plugin pour gérer le défilement, comme suit:

HTML
```
<div id="wrapper">
<div id="scroller">
<p>...</p>
<p>...</p>
</div>
</div>
```
JS
```
$(document).ready(function(){
//prevent all scroll //
$('body').on('touchmove', function(e) {
e.preventDefault();
});
//apply iscroll to scrolling element
//requires use of id
var newscroll = new iScroll('wrapper');
});
```
JSFiddle Exemple Ici

C'est ma méthode préférée, car il bloque tout le caoutchouc de la bande de défilement et offre une belle zone de défilement, cependant il s'appuie sur l'utilisation d'un plugin.

J'espère que cette aide
- Merci, la solution 1 a travaillé pour notre problème lié à cette question!
- target = e.la cible n'est pas utilisé.
InformationsquelleAutor dSquared
2

Voici une solution qui utilise jQuery et Hammer.js (jquery-mise en œuvre). C'est deux bibliothèques, mais si vous travaillez sur mobile, les chances sont que vous aurez envie d'inclure le Marteau de toute façon.

Pour chaque drag-événement que les bulles vers le haut (donc non-défilement de glisser interactions pouvez utiliser stopPropagation) le gestionnaire vérifie si il fait barboter à travers tous les éléments class=défilement, le cas échéant, si l'utilisateur fait défiler dans le permis limites de la scrollContainer et alors seulement est-il permis de natif de défilement.
```
$("body").hammer().on('drag swipe', function(e){
var scrollTarget = $(e.gesture.target).closest(".scrollable");
if(scrollTarget.length)
{
var scrollTopMax = scrollTarget[0].scrollHeight - scrollTarget.outerHeight();
if(scrollTopMax > 0){
var scrollTop = scrollTarget.scrollTop();
if(scrollTop > 0 && scrollTop < scrollTopMax){
//console.log("scrolling in the middle");
}
else if(scrollTop <= 0 && e.gesture.deltaY < 0){
//console.log("scrolling from top");
}
else if(scrollTop >= scrollTopMax && e.gesture.deltaY > 0){
//console.log("scrolling from bottom");
}
else{
//console.log("trying to scroll out of boundaries");
e.gesture.preventDefault();
}
}
else{
//console.log("content to short to scroll");
e.gesture.preventDefault();
}
}
else{
//console.log("no containing element with class=scrollable");
e.gesture.preventDefault();
}
});
```
De tuer traîne par pincement, etc.; s'échapper comme nécessaire pour permettre le zoom si votre vue est user-scalable
```
$("body").hammer().on('doubletap rotate pinch', function(e){
e.gesture.preventDefault();
});
```
Testé sur ios7/safari, android4.3/webview et android4.3/firefoxMobile25 et la seule solution qui ne rompt pas.
- Quels sont les paramètres sur CSS touch-action sont nécessaires pour faire ce travail?
- La réponse est antérieure à touch-action tout à fait un peu, donc auto; mais j'espère que maintenant il y a de meilleures solutions disponibles.
- En fait, le problème existe toujours et les solutions sont toujours problématique. Découvrez mon post sur une analyse approfondie du problème et quelques résumés des approches de solutions. Ce qui finalement fait le truc dans mon cas, c'était le script iNoBounce.
- Tbh, ce type de script est ce que je voulais dire avec "meilleures solutions". Les sons abstraits comme il fonctionne de manière similaire à ma solution, mais l'avoir en tant que script nous donne de la mise en œuvre facile et centralisé de suivi des bogues. Le seul problème que je vois est l'accent mis sur iOS, est-il rien sur Android?
InformationsquelleAutor Tobl
1

J'ai écrit, à mon avis, la meilleure solution pour ce problème. Il permet de désactiver le défilement en général, à moins que l'élément a y défilement.
```
/********************************************************************************
* Disable rubber band (c)2013 - Mark van Wijnen | www.CrystalMinds.nl
********************************************************************************/
$(function(){
var scrollY = 0;
$(document).on('touchstart', function( e ){
scrollY = e.originalEvent.touches.item(0).clientY;
});
$(document).on('touchmove', function( e ){
var scrollPos       = e.target.scrollTop;
var scrollDelta     = scrollY - e.originalEvent.touches.item(0).clientY;
var scrollBottom    = scrollPos + $(e.target).height();
scrollY             = e.originalEvent.touches.item(0).clientY;
if ( $(e.target).css( 'overflow-y' ) != 'scroll' || ( scrollDelta < 0 && scrollPos == 0 ) || ( scrollDelta > 0 && scrollBottom == e.target.scrollHeight ) ) 
e.preventDefault();
});
});
```
- salut @mark, si vous êtes intéressé par HTML5 consulting pour un iphone web app, auriez-vous l'esprit envoyant un courriel à info à panabee point com? merci! une suggestion: on peut spécifier "auto" comme la valeur au lieu de "faire défiler."
- aussi est-il nécessaire de mettre à jour scrollY dans touchmove? une simple comparaison avec l'original du robinet doit indiquer la direction, à droite?
- Il a été un moment depuis que j'ai écrit le code, mais je devine que je suis la mise à jour de la scrollY pour la scrollDelta de la propriété. Lorsque vous faites défiler vers le haut dans une zone déroulante alors que vous êtes déjà au top le rebond va se produire, ce qui l'en empêche.
- Qu'entendez-vous par HTML5 consulting?
- Depuis que vous avez si soigneusement inclus un avis de droit d'auteur, pouvez-vous préciser la licence, vous êtes à la libération de cet extrait de vertu?
InformationsquelleAutor Mark

Basé sur @Marc réponse, nous sommes arrivés avec cette alternative, qui semble fonctionner. Remplacer .page_list avec les noms de classe de défilement des éléments.

var INITIAL_Y = 0; //Tracks initial Y position, needed to kill Safari bounce effect
function kill_safari_bounce() {
$( document ).on( 'touchstart', function( e ){
INITIAL_Y = e.originalEvent.touches[0].clientY;
});
$( document ).on( 'touchmove', function( e ) {
//Get scrollable ancestor if one exists
var scrollable_ancestor = $( e.target ).closest( '.page_list' )[0];
//Nothing scrollable? Block move.
if ( !scrollable_ancestor ) {
e.preventDefault();
return;
}
//If here, prevent move if at scrollable boundaries.
var scroll_delta = INITIAL_Y - e.originalEvent.touches[0].clientY;
var scroll_pos = scrollable_ancestor.scrollTop;         
var at_bottom = (scroll_pos + $(scrollable_ancestor).height()) == scrollable_ancestor.scrollHeight;
if ( (scroll_delta < 0 && scroll_pos == 0) ||
(scroll_delta > 0 && at_bottom) ){
e.preventDefault();
}    
});
}

Merci, fonctionne toujours parfaitement dans iOS 7.1
Pouvez-vous faire un travail de violon, je ne peux pas obtenir que cela fonctionne, je dois être en manque de quelque chose. Merci

InformationsquelleAutor Crashalot

Enfin j'ai mélangé quelques méthodes et ces codes sont la version de travail.
Mais vous devez comprendre la hammer.js

CSS

.scrollable{
overflow:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
*{ -webkit-transform:translate3d(0,0,0);}
}

JAVASCRIPT

$(document).on("touchmove",function(e){
e.preventDefault();
});
$("body").on("touchstart",".scrollable",function(e){
if(e.currentTarget.scrollTop===0){
e.currentTarget.scrollTop = 1;
}else if(e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight){
e.currentTarget.scrollTop-=1;
}
});
$("body").on("touchmove",".scrollable",function(e){
e.stopPropagation();
});
$("body").hammer().on("pinch",function(e){
e.gesture.preventDefault();
});

InformationsquelleAutor ozgrozer

-1

Il suffit d'ajouter une -webkit-overflow-scrolling: auto; à la div vous souhaitez empêcher de rebondir
- Aussi tue toute forme de défilement lisse.
InformationsquelleAutor Raul Brito

Vous devez vous connecter pour publier un commentaire.