Je suis l'ajout de cette réponse pour l'exhaustivité parce que l'on a accepté la réponse de @amustill ne pas résoudre correctement le problème dans Internet Explorer. Veuillez voir les commentaires dans mon premier post pour plus de détails. En outre, cette solution ne nécessite pas de plugins uniquement jQuery.
En essence, le code fonctionne, par la manipulation de l' mousewheel événement. Chaque événement contient un wheelDelta égal au nombre de px qu'il va déplacer la zone déroulante. Si cette valeur est >0, alors nous sommes défilement up. Si l' wheelDelta est <0 puis nous sommes défilement down.
FireFox: FireFox utilise DOMMouseScroll que l'événement, et remplit originalEvent.detail, dont +/- est inversée par rapport à ce qui est décrit ci-dessus. Il revient généralement à des intervalles d' 3, tandis que les autres navigateurs de retour de défilement dans les intervalles de l' 120 (au moins sur ma machine). Pour corriger, il nous suffit de le détecter et de le multiplier par -40 à se normaliser.
@amustill la réponse de travaux par voie d'annulation de l'événement, si l' <div>s'zone avec défilement est déjà au haut ou le bas à la position maximale. Toutefois, Internet Explorer ignore l'annulation d'un événement dans les situations où l' delta est plus grand que le reste de défilement de l'espace.
En d'autres termes, si vous avez un 200px haut <div> contenant 500px de contenu défilant, et le courant scrollTop est 400, mousewheel événement qui indique au navigateur pour faire défiler 120px supplémentaires se traduira par l' <div> et de la <body> de défilement, car 400 + 120 > 500.
Donc, pour résoudre le problème, nous devons faire quelque chose de différent, comme indiqué ci-dessous:
La condition d' jQuery code est:
$(document).on('DOMMouseScroll mousewheel', '.Scrollable', function(ev) {
var $this = $(this),
scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = $this.height(),
delta = (ev.type == 'DOMMouseScroll' ?
ev.originalEvent.detail * -40 :
ev.originalEvent.wheelDelta),
up = delta > 0;
var prevent = function() {
ev.stopPropagation();
ev.preventDefault();
ev.returnValue = false;
return false;
}
if (!up && -delta > scrollHeight - height - scrollTop) {
// Scrolling down, but this will take us past the bottom.
$this.scrollTop(scrollHeight);
return prevent();
} else if (up && delta > scrollTop) {
// Scrolling up, but this will take us past the top.
$this.scrollTop(0);
return prevent();
}
});
En essence, ce code annule toute défilement événement qui permettrait de créer les indésirables bord, puis utilise jQuery pour définir l' scrollTop de la <div> , soit la valeur minimale ou maximale, selon la direction dans laquelle le mousewheel événement a été demandé.
Parce que l'événement est annulé entièrement dans les deux cas, il ne se propage à l' body à tous, et donc de résoudre le problème sous IE, ainsi que tous les autres navigateurs.
J'ai également mis en place un exemple de travail sur jsFiddle.
