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
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
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:
Assurez-vous d'ajouter
div
s 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
Vous devez vous connecter pour publier un commentaire.
Alors que vous n'êtes pas frapper les bords de votre div du contenu, vous devez autoriser le natif touchmove évènement pour travailler sur cet élément (donc il peut faire défiler), mais vous allez avoir à arrêter l'évènement de remonter les DOM, afin de ne pas déclencher le défilement du corps de la page.
Lorsque vous atteignez les limites de votre élément, vous devez empêcher le natif de défilement dynamique entièrement.
Le code que j'ai utiliser pour ce est comme suit (excuses à l'auteur original, c'est adapté d'un tutoriel sur ce sujet, j'ai trouvé quelque part sur internet dans le passé... n'arrive pas à trouver l'URL maintenant si):
où elem est votre nœud DOM
J'ai l'habitude de définir un tableau d'éléments et de les parcourir en boucle - l'application de ce code à chacun de manière itérative.
Meilleur de la chance, espérons que cette aide.
-webkit-overflow-scrolling: touch
? Si non, il doit 🙂Pour celui qui est confondu par le format: l'affiche originale a ajouté une "Solution" de la partie qui prend ce code et la met en œuvre. Il fonctionne bien pour moi.
Si vous utilisez ce pour une application dynamique, n'oubliez pas de re-lier les écouteurs d'événement pour les nouveaux éléments lorsqu'ils sont remplacés! J'ai remplacé
elem.addEventListener
pour jQuery$(document.body).on("touchstart", ".scrollable", function () {...});
merci beaucoup, ton commentaire est vraiment utile!
OriginalL'auteur 1nfiniti
Les réponses initiales sont fantastiques, mais ont quelques défauts que j'ai résolu:
Ma réponse adresses de ceux-ci. (Notez que j'utilise
.scroll-y
, au lieu de.scrollable
)Tout d'abord, ajoutez ces règles CSS:
Ajouter le
.scroll-y
classe à tous les éléments que vous souhaitez faire défiler.Ajoutez ensuite ce JS quelque part:
Je souhaite que je pourrais upvote ce un million de fois plus, j'ai été la recherche d'une solution de travail à ce pendant des jours, alors merci!
OriginalL'auteur micho