Horizontal Sliding Content

http://stackoverflow.com/questions/13058818/bottom-div-with-horizontally-sliding-content

CSS

#fixed {
    border: 1px solid #000;
    padding: 10px;
   
    position: fixed;
    right: 383px;
    bottom: 0;
    left: 172px;
    
    white-space: nowrap;
    overflow: hidden;
}
.item {
    background-color: #ccc;
    width: 50px;
    height: 50px;
    font-size: 20px;
    
    display: inline-block;
}

.controls {
    background-color: #999;
    padding: 10px;
    position: fixed;
    bottom: 1px;
    height: 50px;
    width: 5px;
}
#left {
    left: 147px;
}
#right {
    right: 358px;
}

JavaScript

$(function () {
    $('#left').hover(function () {
        scrollLeft();
    }, function () {
        stopScroll();
    });

    $('#right').hover(function () {
        scrollRight();
    }, function () {
        stopScroll();
    });
});

var $fixed = $('#fixed'),
    scrollSpeed = 20,
    scrollerTimeout,
    scrollLeft = function () {
        $fixed.scrollLeft($fixed.scrollLeft() - scrollSpeed);
        scrollerTimeout = window.setTimeout(scrollLeft, 100);
    },
    scrollRight = function () {
        $fixed.scrollLeft($fixed.scrollLeft() + scrollSpeed);
        scrollerTimeout = window.setTimeout(scrollRight, 100);
    },
    stopScroll = function () {
        window.clearTimeout(scrollerTimeout);
    };