J'essaie de désactiver le défilement horizontal sur un site Web; mais permettant le défilement vertical.
J'ai un script qui fonctionne comme un curseur en faisant glisser le "corps" de la page à gauche et en révélant plus de contenu. Cependant, cela crée un espace vide supplémentaire à droite.
Je dois désactiver le défilement horizontal afin que les utilisateurs ne voient pas cet espace vide. J'ai essayé le script suivant, mais il désactive le défilement horizontal et vertical:
window.onscroll = function () {
window.scrollTo(0,0);
}
J'ai essayé overflow-x: hidden
mais cela ne fonctionne pas lorsque la largeur du corps est dynamique et non statique.
Existe-t-il un moyen de modifier le script ci-dessus pour désactiver le défilement horizontal et conserver le défilement vertical?
Vous étiez près de l'obtenir. Vous devez obtenir la document
—ou window
— et lier le défilement: vous pouvez alors vérifier si la scrollLeft
est mise à jour à plus que 0 et définir scrollLeft
à 0.
Le code suivant fonctionne bien:
$(function() {
var $body = $(document);
$body.bind('scroll', function() {
// "Disable" the horizontal scroll.
if ($body.scrollLeft() !== 0) {
$body.scrollLeft(0);
}
});
});
Si vous souhaitez désactiver le défilement horizontal pour un élément (comme div, par exemple), il vous suffit de remplacer $(document)
par $("#yourElementID")
.
JSFiddle:https://jsfiddle.net/tomloprod/zx1bvdf5/
REMARQUE:
Le script ci-dessus vous empêchera de faire défiler horizontalement. De plus, vous pouvez utiliser le style CSS suivant:
overflow-x:hidden;
pour masquer le défilement horizontal.Et ce sera comme s'il n'y avait pas de défilement horizontal.
Cela devrait fonctionner (CSS):
html, body {
max-width: 100% !important;
overflow-x: hidden !important;
}
utilisez overflow-x: caché sur votre élément wrapper
overflow-x:hidden;
Sans JQuery:
window.onscroll = function () {
window.scrollLeft = 0;
}
Vous pouvez également jQuery "sur" et vérifier le deltaX.
$("body").on("wheel", function(e) {
var deltaX = e.originalEvent.deltaX;
if (deltaX !== 100 && deltaX !== -100) {
...do something
}
return false;
});