Lisse de défilement horizontale lié à la roulette de la souris
Voici un exemple de travail de défilement horizontale avec la roulette de la souris, mais elle ne se défile pas en douceur. En douceur, je veux dire ordinaire de défilement verticale dans Firefox ou Opera.
$(function() {
$("html, body").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
(http://brandonaaron.net/code/mousewheel/docs)
J'ai fait une démo en live pour le démontrer.
http://jsfiddle.net/Dw4Aj/
Je veux que ce parchemin au travail comme à la verticale, à la fois avec la roulette de la souris et de la souplesse.
Quelqu'un peut m'aider?
créer une démo en live qui réplique en question jsfiddle.net
ici il est! lien
Probablement non, je me suis connecté la
ici il est! lien
Probablement non, je me suis connecté la
delta
variable de défilement sur un MacBook pavé tactile (pas de souris), et il s'est avéré assez peu fiable. Effectuer vos propres tests et de déterminer si cela pourrait être le maillon faible de cette approche.OriginalL'auteur Vladimir Wood | 2012-10-21
Vous devez vous connecter pour publier un commentaire.
Défilement lisse est un navigateur spécifique de fonctionnalité.
Si vous voulez quelque chose qui fonctionne sur tous les d'eux, alors vous devez faire de votre côté.
Il existe plusieurs implémentations de défilement lisse pour jQuery.
Et en fait, vous pouvez même besoin d'dite de défilement cinétique. Si donc, essayez jquery.cinétique
Depuis que vous êtes à le faire par programmation, il est probable qu'il ne fonctionne pas comme les contrôles d'origine.
Mikhalev Comme je l'ai dit à défilement lisse est un navigateur spécifique de fonctionnalité. Google Chrome par exemple ne pas utiliser le défilement régulier. Donc, si vous voulez voir à défilement lisse, là et dans tous les autres, et de la même manière que vous avez à mettre en œuvre manuellement ou utilisez une bibliothèque existante.
OriginalL'auteur c-smile
1er je pense que c'est pour se rappeler du dernier événement scroll, d'horodatage, de jouer avec l'assouplissement de la fonction, afin d'obtenir le bon résultat http://jsfiddle.net/oceog/Dw4Aj/13/
j'ai testé sur chrome, au moins jsfiddle.net/oceog/Dw4Aj/13, beau travail
toute erreur dans la console ?
Aucun. La seule chose que je puisse vraiment déterminer, c'est qu'scrollLeft parfois ne pas se fixer.
C'est un travail, mais très glitchy. Je pense que la bonne réponse est à utiliser .animer pour le faire fonctionner correctement.
OriginalL'auteur zb'
Essayez d'utiliser votre fonction en même temps .animate()
J'ai juste fait moi-même et ça fonctionne. J'ai créé un instagram se nourrissent de l'application web que j'ai créé, et les autres plugins que j'ai été en utilisant cassaient trop souvent:
ne fonctionne pas, dit "erreur de syntaxe" ici: a gauche: -= (delta * 30);
Essayez de le mettre entre guillemets: "-=(delta*30)px"
Pas de travail de deux façons, maintenant, il dit: "animer n'est pas une fonction"
Ok... N' $(this) au lieu de "ce"
OriginalL'auteur Brian Noah
J'ai trouvé d'autres solution sympa à utiliser wrapper, si vous faites défiler absolue à la même position, comme vous le feriez pour un défilement vertical, il fonctionne si vous avez juste besoin de défilement, pas de sélection de texte ou d'autres(peut-être qu'travail arounded, mais je fatigue)
http://jsfiddle.net/oceog/Dw4Aj/16/
j'ai fait un autre échantillon, maintenant sans wholescreen wrapper, et de la possibilité de sélectionner
http://jsfiddle.net/oceog/DcyWD/
OriginalL'auteur zb'
Je vais juste laisser ça ici.
http://jsfiddle.net/Dw4Aj/19/
OriginalL'auteur Vladimir Wood
Il suffit de changer cela:
:
OriginalL'auteur Amir Rezvani