<div> <h1>Div de défilement horizontal à l'aide de boutons</h1> </div>

Question

Comment puis-je mettre des boutons gauche et droite sur un DIV pour faire défiler le contenu horizontalement? Je n'ai pas besoin d'afficher une barre de défilement.

HMTL:

CSS:

#browser { float: left; width: 200px; overflow: hidden; white-space: nowrap; }

Answer 1

Faire:

   $('#right-button').click(function() {
      event.preventDefault();
      $('#content').animate({
        marginLeft: "-=200px"
      }, "fast");
   });

Ensuite, faire de même pour le bouton de gauche, sauf - marginLeft: +="200px".

Answer 2

Voici le code que vous voulez. Il est prouvé que cela fonctionne sur IE, Safari, Chrome, Firefox, etc.

Voici la partie HTML.

Voici la partie jQuery dans la fonction JavaScript.

       function scrollThumb(direction) {
        if (direction=='Go_L') {
            $('#slide-wrap').animate({
                scrollLeft: "-=" + 250 + "px"
            }, function(){
                // createCookie('scrollPos', $('#slide-wrap').scrollLeft());
            });
        }else
        if (direction=='Go_R') {
            $('#slide-wrap').animate({
                scrollLeft: "+=" + 250 + "px"
            }, function(){
                // createCookie('scrollPos', $('#slide-wrap').scrollLeft());
            });
        }
       }

Pour masquer les flèches, veuillez consulter ici. Detecter la fin du défilement horizontal d'une div avec jQuery

Answer 3

Vous pouvez essayer ceci : - Créez un "masque div" et définissez la position relative, définissez la largeur et cachez le débordement. - Créez un contenu div à l'intérieur du masque div et définissez la position fixe

Maintenant, vous pouvez mettre deux boutons : gauche et droite, et vous devez modifier uniquement la valeur de gauche du contenu div

Similaire à la solution de Patches :)