-webkit-overflow-scrolling: touchez et «Tapez sur la barre d'état pour faire défiler vers le haut»

Accédez à ce violon sur un iPhone et vous remarquerez que même si il y a un -webkit-overflow-scrolling:touch déclaration, le " appuyez sur le haut, la fonction fonctionne toujours. Cela a été testé sur un iPhone 4 sous iOS 6.1 et d'un iPhone 4S sous iOS 5.0.1.

Cet essai pose la question: ne déclarant -webkit-overflow-scrolling:touch affecter la 'appuyez sur barre d'état pour faire défiler vers le haut comportement dans iOS?

source d'informationauteur Bryce

9

Si vous mettez -webkit-overflow-scrolling:touch sur tout élément autre que document.bodyil va casser le défaut appuyez sur barre d'état pour faire défiler vers le haut comportement.

Il y a un petit script sur GitHub, qui fonctionne comme un remplacement pour les faire défiler vers le haut de l'iOS dépassement de défilement. Vous pouvez le mettre sur votre apps-tête pour atteindre près le même résultat.
9

À partir de mon expérience, c'est en effet sur ce dernier. Je ne sais pas de manière à avoir les deux fonctions de travail dans le même temps, à moins que de l'iOS 6.1.

J'ai aussi une citation de la jQuery Mobile docs que l'a confirmé:

L'-webkit-débordement-défilement:appuyez sur la propriété semble désactiver les événements de défilement vous en haut de la page lorsque le temps est tapée dans la barre d'état. Nous espérons que Apple corrige ce parce que c'est une fonctionnalité très utile.

Il est vraiment regrettable qu'Apple a mis en place comme cela, que moi aussi, j'aimerais utiliser cette fonction, mais le scroll à haut pouvoir est plus important pour moi.
2

Votre violon ne pas briser le “appuyez sur barre d'état pour faire défiler vers le haut” comportement, parce que vous avez appliqué -webkit-overflow-scrolling: touch; à la body élément. Si vous l'appliquer à tout élément à l'intérieur de body le comportement des pauses.
0

Il y a un moyen de contourner ce – http://www.artspot.eu/blog/2010/12/29/extending-iscroll-scroll-to-the-top-by-tapping-the-status-bar/
Matteo Spinelli, le créateur de iScroll, révèle dans un tweet que c'est
en fait pas mal du tout pour y parvenir. Lorsque vous appuyez sur la barre d'état,
l'événement scroll sur l'objet window est déclenché. À l'aide d'un événement
écouteur vous pouvez facilement appeler la fonction scrollTo pour faire défiler jusqu'à
le haut de la liste.
```
window.addEventListener('scroll', function(){
  yourscrollobject.scrollTo(0,0,duration);
}, false);
```
0

Que la plupart des réponses ici l'avons noté, en mettant -webkit-overflow-scrolling: touch sur tout élément autre que le document.corps provoque des problèmes. Si vous êtes en utilisant un en-tête fixe et ne voulez pas ajouter de toutes les dépendances, ceci devrait faire l'affaire pour quelqu'un à l'aide de JQuery:
```
$('.fixed-header').on('click',function(e){
    var $scrollingElement = $('.scrolling-element');

    $scrollingElement.css('overflow','hidden');
    $scrollingElement.animate({ scrollTop: 0 }, "fast", function() {
        $scrollingElement.css('overflow','auto');
    });
});
```
Le but de basculement de la overflow propriété est pour les appareils utilisant le défilement dynamique. Cela s'arrête immédiatement tout élan et le défilement de l'animation. J'ai fait le défilement de l'élément d'une variable, de sorte que nous ne sommes pas inutilement de l'interrogation du DOM à plusieurs reprises. Espérons que cela aide quelqu'un en bas de la route. Si vous préférez être les mains hors sujet, le projet github @patrick lié à ressemble à une autre excellente solution.

Vous devez vous connecter pour publier un commentaire.