Scrolling left to right

Question

I have an area on my page that show a couple years worth of population data, in a month by month spread.

What i am trying to do is creating a small slider/scrollbar so users can scroll left to right to view the data.

As I am trying to integrate AngularJS within my application, i have tried using:

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

See this updated plunker: http://plnkr.co/edit/v6QBOq3rrBkcOLhLwFme?p=preview

This works great when sliding up and down, but can can i adapt so that users can slide left to right?

---

UPDATE:

I've attempted to replicate the "Horizontal scroll with buttons and caps" example found in harnishdesign post from here: http://jscrollpane.kelvinluck.com/caps.html

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

However the scroll doesnt work.

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

Answer 1

You need to use Popular jscrollpane for custom scroll bar. many option available in jscrollpane.

http://jscrollpane.kelvinluck.com/

Answer 2

See i don't prefer missing up JQuery with AngularJS

Just take a look at this beautiful stuff Don't augment jQuery with AngularJS

You can achieve Vertical as well as Horizontal Scroll bar like as shown below.

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

You can try jQuery Scrollbar that can be integrated with AngularJS as you can see on Angular Demo page.

If you can see horizontal scrollbar with overflow:auto, but without any plugin applied, you can apply jQuery Scrollbar.

If you need scrolling content horizontally with mousewheel, look at this 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;
};

You can apply this code within onInit callback in your AngularJS controller.