Horizontale de défilement avec la molette de la souris dans un div

Défilement horizontal dans na div avec la souris whell, ou faites glisser avec jquery?

J'ai essayé déplaçable, mais dans mon code, il n'est pas utile.

Maintenant, j'ai une barre de défilement horizontale. Est-il une possibilité de faire défiler le contenu de mon div avec la molette de la souris?

  • Montrez-nous ce que vous avez essayé
InformationsquelleAutor Daniel Koczuła | 2012-07-28
  1. 43

    Essayez ceci pour le défilement horizontal avec la molette de la souris. C'est de la pure JavaScript:

    (function() {
    function scrollHorizontally(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        document.getElementById('yourDiv').scrollLeft -= (delta*40); //Multiplied by 40
        e.preventDefault();
    }
    if (document.getElementById('yourDiv').addEventListener) {
        //IE9, Chrome, Safari, Opera
        document.getElementById('yourDiv').addEventListener("mousewheel", scrollHorizontally, false);
        //Firefox
        document.getElementById('yourDiv').addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
        //IE 6/7/8
        document.getElementById('yourDiv').attachEvent("onmousewheel", scrollHorizontally);
    }
})();

    Voici une démo, mais avec document.body et window comme un élément ciblé: http://rawgit.com/tovic/dte-project/master/full-page-horizontal-scrolling.html

    • Merci c'est exactement ce que je cherchais. Enfin une réponse qui n'est pas de proposer un plugin JQuery. BTW: Si quelqu'un d'autre connaît des difficultés, essayez d'ajouter après tous vos html. Exemple - jsbin.com/usabigE/2/edit
    • Upvote pour montrer l'exemple dans vanila Javascript.
    • Si vous voulez faire défiler verticalement lorsque l'élément a fait défiler tout le chemin vers la gauche ou la droite, vous pouvez enrouler le e.preventDefault(); avec cette instruction if: if((delta > 0 && document.getElementById('yourDiv').scrollLeft > 0) || (delta < 0 && document.getElementById('yourDiv').offsetWidth+document.getElementById('yourDiv').scrollLeft < el.scrollWidth)) (testé sur Chrome et Firefox)
    InformationsquelleAutor Taufik Nurrohman
  2. 12

    J'ai réécrit le code de la réponse par @Anonyme-de la Laitue. La largeur de recalcul de l'élément est ignoré car il est inutile et parfois indésirables.
    Cela fournit également caractéristique supplémentaire de passer scroll-amount dans px du plugin.

    L'utiliser comme ceci:

    $(document).ready(function(){
    $('#your_div').hScroll(100); //You can pass (optionally) scrolling amount
});

    Voici la mise à jour du plugin jquery.hscroll.js:

    jQuery(function ($) {
    $.fn.hScroll = function (amount) {
        amount = amount || 120;
        $(this).bind("DOMMouseScroll mousewheel", function (event) {
            var oEvent = event.originalEvent, 
                direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta, 
                position = $(this).scrollLeft();
            position += direction > 0 ? -amount : amount;
            $(this).scrollLeft(position);
            event.preventDefault();
        })
    };
});

    Ici est la version compacte de la même jquery.hscroll.min.js:

    jQuery(function(e){e.fn.hScroll=function(l){l=l||120,e(this).bind("DOMMouseScroll mousewheel",function(t){var i=t.originalEvent,n=i.detail?i.detail*-l:i.wheelDelta,o=e(this).scrollLeft();o+=n>0?-l:l,e(this).scrollLeft(o),t.preventDefault()})}});

    Ici est la JSFiddle

    InformationsquelleAutor Izhar Aazmi
  3. 3

    A écrit ce plugin jours.

     $.fn.hScroll = function( options )
 {
   function scroll( obj, e )
   {
     var evt = e.originalEvent;
     var direction = evt.detail ? evt.detail * (-120) : evt.wheelDelta;

     if( direction > 0)
     {
        direction =  $(obj).scrollLeft() - 120;
     }
     else
     {
        direction = $(obj).scrollLeft() + 120;
     }

     $(obj).scrollLeft( direction );

     e.preventDefault();
   }

   $(this).width( $(this).find('div').width() );

   $(this).bind('DOMMouseScroll mousewheel', function( e )
   {
    scroll( this, e );
   });
}

    Essayer avec

    $(document).ready(function(){
     $('#yourDiv').hScroll();
});

    La largeur de l'élément enfant de la div doit être plus large que le parent.

    Comme 4000 px ou quelque chose.

     <div id="yourDiv">
       <div style="width: 4000px;"></div>
 </div>
    • fonctionne bien, testé sur jquery datatable avec le défilement horizontal est activé (n'a pas besoin de la largeur de recalcul si). Vous pouvez créer un dépôt github pour cela.
    • Je pourrais, je vais essayer plus tard. Jamais utilisé Github encore.
    InformationsquelleAutor Ivan Ivković
  4. 3

    Je voudrais ajouter une légère amélioration de la réponse donnée par @Taufik.

    Dans le contexte d'une es2015 module:

    const el = document.querySelector('#scroller');

function scrollHorizontally(e) {
  e = window.event || e;
  e.preventDefault();
  el.scrollLeft -= (e.wheelDelta || -e.detail);
}

function init() {
  if (!el) {
    return;
  }

  if (el.addEventListener) {
    el.addEventListener('mousewheel', scrollHorizontally, false);
    el.addEventListener('DOMMouseScroll', scrollHorizontally, false);
  } else {
    el.attachEvent('onmousewheel', scrollHorizontally);
  }
}

export default init;

    La différence principale étant: el.scrollLeft -= (e.wheelDelta || -e.detail);

    À l'aide de la e.wheelData directement dans le défilement de décalage signifie que nous pouvons avoir la inertie, de sorte que la vitesse de défilement peut ralentir progressivement. J'ai trouvé cela a bien fonctionné pour moi.

    Simplement utiliser dans votre code comme (en supposant que le code ci-dessus est dans un fichier appelé scroller.js):

    import scroller from './scroller.js';
scroller();
    InformationsquelleAutor Michael Giovanni Pumo
  5. 0

    Dans mon cas, j'avais besoin de réinitialiser le défilement de retour à la normale lorsque le navigateur est redimensionnée, j'ai donc modifié Jitsehar de l' code un peu pour le faire fonctionner pour ma demande:

    Initier propriétés hscroll sur navigateur redimensionner:

    $(function () {
     $(window).resize($('.horizontal-scroll').hScroll(60));
});

    Vérifier si le conteneur a propriété white-space défini à 'nowrap' et revenir si ce n': 

    $.fn.hScroll = function (amount) {
    var $this = $(this);
    amount = amount || 120;
    $this.bind('DOMMouseScroll mousewheel', function (event) {
         var isHorizontal = $('.horizontal-scroll').css('white-space') == 'nowrap';
         if (!isHorizontal) return;
         var oEvent = event.originalEvent,
        direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta,
        position = $this.scrollLeft();
    position += direction > 0 ? -amount : amount;
    $this.scrollLeft(position);
    event.preventDefault();
});

    };

    - Je utiliser ce média de requête de mise à jour de la propriété white-space:

    @media (min-width: 768px) {
    .horizontal-scroll { white-space: nowrap !important; }
}

    Espère que cela aide à tous ceux qui veulent faire la même chose.

    InformationsquelleAutor tqrecords