web-dev-qa-db-fra.com

Désactiver le défilement horizontal; mais permettre le défilement vertical

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. 

Question:

Existe-t-il un moyen de modifier le script ci-dessus pour désactiver le défilement horizontal et conserver le défilement vertical?

javascriptjquerydom
13
user2028856

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.

22
tomloprod

Cela devrait fonctionner (CSS):

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}
11
Amit Joki

utilisez overflow-x: caché sur votre élément wrapper

overflow-x:hidden;

3
Stanley Tso

Sans JQuery:

window.onscroll = function () {
  window.scrollLeft = 0;
}
1
Mikaël Mayer

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;
});
0
Michael S.