Je voulais juste désactiver l'effet de défilement/rebond élastique dans Safari (OSX Lion).
J'ai trouvé la solution pour définir overflow: hidden pour body dans css, mais comme prévu, il n'y a que des désactive la barre de défilement Ainsi, si le site web est plus long que l'écran sur lequel vous vous trouvez, vous pouvez le consulter. ne pourra pas défiler !
Toutes les solutions et tous les conseils sont les bienvenus ! Merci de votre compréhension.
Vous pouvez atteindre cet objectif de manière plus universelle en appliquant le CSS suivant :
html,
body {
height: 100%;
width: 100%;
overflow: auto;
}Cela permet à votre contenu, quel qu'il soit, de devenir défilable à l'intérieur de body mais il faut savoir que le contexte de défilement dans lequel se trouvent les scroll est déclenché est maintenant document.body , pas window .
Si vous utilisez le overflow:hidden hack sur le <body> pour retrouver un comportement de défilement normal, vous pouvez positionner un élément <div> à l'intérieur de l'élément pour rétablir le défilement avec overflow:auto . Je pense que c'est la meilleure option, et c'est assez facile à mettre en œuvre en utilisant seulement css !
Vous pouvez également utiliser jQuery :
$(document).bind(
'touchmove',
function(e) {
e.preventDefault();
}
);Idem dans javasrcipt :
document.addEventListener(
'touchmove',
function(e) {
e.preventDefault();
},
false
);Dernière option, vérifier ipad safari : désactiver le défilement et l'effet de rebond ?
overflow:hidden;-webkit-overflow-scrolling:touch ne fonctionnera pas bien sur iOS safari 8.1, car l'en-tête fixe sera en dehors de la zone visible.
Comme le dit @Yisela, la css doit être placée sur .container (le <div> ci-dessous <body> ). ce qui ne semble pas poser de problème (du moins sur safari iOS 8.1)
J'ai placé la démo sur mon blog : http://tech.colla.me/en/show/disable_elastic_scroll_on_iOS_safari
J'avais résolu le problème sur l'iPad. Essayez, si cela fonctionne aussi sur OSX.
body, html { position: fixed; }
Cela ne fonctionne que si le contenu est plus petit que l'écran ou si vous utilisez un cadre de mise en page (Angular Material dans mon cas).
Dans Angular Material, il est possible de désactiver l'effet over-scroll de toute la page, mais aussi des sections intérieures. <md-content> peut toujours être défilable.
J'ai créé une extension pour le désactiver sur tous les sites. Pour ce faire, j'ai utilisé trois techniques : CSS pur, JS pur et hybride.
La version CSS est similaire aux solutions ci-dessus. La version JS se présente un peu comme suit :
var scroll = function(e) {
// compute state
if (stopScrollX || stopScrollY) {
e.preventDefault(); // this one is the key
e.stopPropagation();
window.scroll(scrollToX, scrollToY);
}
}
document.addEventListener('mousewheel', scroll, false);Le CSS fonctionne lorsque l'on utilise la position : des éléments fixes et que l'on laisse le navigateur se charger du défilement. L'approche JS est nécessaire lorsque d'autres éléments JS dépendent de la fenêtre (par exemple les événements), ce qui serait bloqué par le CSS précédent (puisqu'il fait défiler le corps au lieu de la fenêtre), et fonctionne en arrêtant la propagation des événements sur les bords, mais doit synthétiser le défilement du composant non périphérique ; l'inconvénient est qu'il empêche certains types de défilement de se produire (ceux qui fonctionnent avec l'approche CSS). L'approche hybride tente d'adopter une approche mixte en désactivant sélectivement le débordement directionnel (CSS) lorsque le défilement atteint un bord (JS) ; en théorie, elle pourrait fonctionner dans les deux cas, mais ce n'est pas tout à fait le cas actuellement, car elle dispose d'une certaine marge de manœuvre à la limite.
Ainsi, en fonction de la mise en œuvre de son site web, il convient d'adopter l'une ou l'autre approche.
Pour plus de détails, voir ici : https://github.com/lloeki/unelastic
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
