empêchent une pleine page de défilement iOS

Sous Safari Mobile, est-il possible de permettre un positionnement absolu div pour faire défiler sans permettre à l'ensemble de la page pour monter et descendre quand il le défilement atteint les bords (élastiquement défilement)?

Ici est un minimum de travail exemple de la question que je me pose:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#a, #b {
position: absolute;
top: 0;
left: 0;
height: 100%;
padding: 10px;
overflow: auto;
}
#a {
width: 80px;
background: #f00;
}
#b {
background: #00f;
left: 80px;
width: 100%;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function pdcb(e) {
e.preventDefault();
}
function npcb(e) {
e.stopPropagation();
}
$(document).on('touchstart touchmove', pdcb).
on('touchstart touchmove', '.scrollable', npcb);
</script>
</head>
<body>
<div id="a" class="scrollable">
This<br>
should<br>
be<br>
scrollable<br>
but<br>
not<br>
scroll<br>
the<br>
whole<br>
page<br>
This<br>
should<br>
be<br>
scrollable<br>
but<br>
not<br>
scroll<br>
the<br>
whole<br>
page<br>
This<br>
should<br>
be<br>
scrollable<br>
but<br>
not<br>
scroll<br>
the<br>
whole<br>
page<br>
This<br>
should<br>
be<br>
scrollable<br>
but<br>
not<br>
scroll<br>
the<br>
whole<br>
page<br>
This<br>
should<br>
be<br>
scrollable<br>
but<br>
not<br>
scroll<br>
the<br>
whole<br>
page<br>
</div>
<div id="b">
this should never scroll
</div>
</body>
</html>

Solution:

$(document).on('touchmove', function(e) {
e.preventDefault();
}).ready(function() {
$(".scrollable").on('touchstart', function(e) {
this.allowUp = (this.scrollTop > 0);
this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
this.prevTop = null;
this.prevBot = null;
this.lastY = e.originalEvent.pageY;
}).on('touchmove', function(e) {
var event = e.originalEvent;
var up = (event.pageY > this.lastY), down = !up;
this.lastY = event.pageY;
if ((up && this.allowUp) || (down && this.allowDown))
event.stopPropagation();
else
event.preventDefault();
});
});
non, pas un doublon. avoir deux divs change les choses.
Les gens marquage ce comme un double - Ce n'est pas un double de la question - la question référencés seulement s'occupe de la prévention natif de défilement dynamique dans iOS complètement cette question/solution est en ce qui concerne permettant le défilement dynamique sur des divs tout en bloquant le défilement sur l'ensemble de la page. Utile pour les applications web avec de nombreuses fixe la position des éléments.
Si vous voulez que cela fonctionne avec de l'ajouter dynamiquement des éléments (comme dans une page unique JS app), remplacer $(".scrollable").on('touchstart', ...) pour $(document.body).on('touchstart', '.scrollable', ...).
Ce code permet de bloquer le défilement lorsque vous êtes déjà au dessus de la div. Si vous utilisez ce pour une application iOS, il pourrait se sentir brisé. Une solution de contournement pour ce qui est de défilement vers le bas 1px le défilement de l'élément, de sorte que le défilement est possible avec le rebond de l'effet: $('.scrollable')[0].scrollTop = 1. Vous pouvez également gérer la fin du défilement de l'événement et de définir scrollTop de 1 à chaque fois qu'il arrive à 0, il n'est donc jamais bloqué à partir de défilement vers le haut.
Assurez-vous d'ajouter -webkit-overflow-scrolling: touch pour le CSS déclaration de votre .scrollable classe pour obtenir le bon natif de défilement.

OriginalL'auteur Aaron Yodaiken | 2013-06-03