Défilement de gauche à droite

Question

J'ai une zone sur ma page qui montre quelques années de données sur la population, dans une répartition mensuelle. Ce que j'essaie de faire est de créer un petit curseur/barre de défilement afin que les utilisateurs puissent faire défiler de gauche à droite pour voir les données.

Comme je suis en train d'intégrer AngularJS au sein de mon application, je l'ai essayé d'utiliser:

https://github.com/asafdav/ng-scrollbar

Voir cette plunker mise à jour: http://plnkr.co/edit/v6QBOq3rrBkcOLhLwFme?p=preview

Cela fonctionne très bien lorsque vous faites glisser vers le haut et vers le bas, mais peut puis-je m'adapter pour que les utilisateurs puissent glisser de gauche à droite?

---

MISE À JOUR:

J'ai essayé de reproduire l'exemple "défilement horizontale avec des boutons et casquettes" trouvé en post harnishdesign d'ici: http://jscrollpane.kelvinluck.com/caps.html

Mon Fiddle: http://jsfiddle.net/F6dk5/

Cependant, le défilement ne fonctionne pas.

$(function() { 
    $('.scroll-pane').jScrollPane({ 
     showArrows: true, 
     horizontalGutter: 30, 
     verticalGutter: 30 
    }); 
}); 

Answer 1

Vous devez utiliser jscrollpane populaire pour la barre de défilement personnalisée. beaucoup d'options disponibles dans jscrollpane.

http://jscrollpane.kelvinluck.com/

Answer 2

voir que je ne préfère pas loupage JQuery avec AngularJS

Il suffit de jeter un oeil à cette belle étoffe Don't augment jQuery with AngularJS

Vous pouvez obtenir verticale et horizontale Barre de défilement comme comme indiqué au dessous de.

Working Demo

html

<div class="scrollbar-container"> 
    <div class="inner"> 
     <p>Content Here........</p> 
    </div> 
</div> 

css

.scrollbar-container { 
    position: absolute; 
    top: 0; bottom: 0; left: 0; right: 0; 
    margin: 20px; 

    border: 4px solid rgba(0, 0, 0, 0.2); 
    overflow: auto; 
    background-color: whiteSmoke; 
} 
.scrollbar-container .inner { 
    height: 2011px; 
    padding: 1em; 
    background-color: white; 
    font-family: sans-serif; 
} 

::-webkit-scrollbar { 
    background: transparent; 
    border: rgba(0, 0, 0, 0.2) solid; 
} 
::-webkit-scrollbar:vertical { 
    border-width: 0 0 0 1px; 
    width: 11px; 
} 
::-webkit-scrollbar-corner { 
    background: transparent; 
} 

/* These rules are for scrollbar draggable panel */ 
::-webkit-scrollbar-thumb { 
    background-color: rgba(0, 0, 0, 0.2); 
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3) inset; 
} 
::-webkit-scrollbar-thumb:hover { 
    background-color: rgba(0, 0, 0, 0.3); 
} 
::-webkit-scrollbar-thumb:active { 
    background-color: rgba(0, 0, 0, 0.5); 
} 

/* These rules are for buttons */ 
::-webkit-scrollbar-button:start{display:none} 
::-webkit-scrollbar-button:end{display:none} 

Answer 3

Vous pouvez essayer jQuery Scrollbar qui peut être intégré avec AngularJS comme vous pouvez le voir sur Angular Demo page.

Si vous pouvez voir la barre de défilement horizontale avec débordement: auto, mais sans aucun plugin appliqué, vous pouvez appliquer la barre de défilement jQuery.

Si vous avez besoin de contenu défilement horizontal avec mousewheel, regardez ce example:

var container = $('.scrollbar-outer'); 
var scrollTo = {}, scrollToValue = 0, isScrolling = false; 
var mouseScroll = function(event){ 
    var delta = event.originalEvent.wheelDelta * -1 || event.originalEvent.detail; 
    var maxScrollValue = container.prop("scrollWidth") - container.parent().width() - parseInt(container.css('left')); 

    if(!((scrollToValue <= 0 && delta < 0) || (scrollToValue >= maxScrollValue && delta > 0))){ 
     scrollToValue = scrollToValue + delta; 
     if(scrollToValue < 0) 
      scrollToValue = 0; 
     if(scrollToValue > maxScrollValue) 
      scrollToValue = maxScrollValue; 

     scrollTo = scrollTo || {}; 
     scrollTo['scrollLeft'] = scrollToValue; 
     setTimeout(function(){ 
      if(scrollTo){ 
       isScrolling = true; 
       container.stop().animate(scrollTo, 240, 'linear', function(){ 
        scrollToValue = container.scrollLeft(); 
        isScrolling = false; 
       }); 
       scrollTo = null; 
      } 
     }, 1); 
    } 

    event.preventDefault(); 
    return false; 
}; 

Vous pouvez appliquer ce code dans onInit rappel dans votre contrôleur AngularJS.