Scroll Pan

Jile Beta Jindagi

by Dipak1991

HTML

<div id="scroll">
    <img class="blue" src="http://www.wired.com/images_blogs/photos/uncategorized/2008/03/04/puppy.jpg" />
</div>
<div class="links"> 
    <a data-move-to="left">Left</a>
    <a data-move-to="right">Right</a>
    <a data-move-to="top">Top</a>
    <a data-move-to="bottom">Bottom</a>
</div>

CSS

#scroll {
    width: 20%;
    height: 100px;
    overflow: hidden;
}
.blue {
    width: 300px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
}
.links {
    margin-top:20px;
}
a {
    display: inline-block;
    width: 100px;
    color: white;
    background: #e8e8e8;
}

JavaScript

$("a").click(function (event) {

    var moveTo = $(this).data('moveTo');

    var scrollLeft = 0;
    var scrollTop = 0;

    event.preventDefault()

    switch (moveTo) {
        case "left":
            scrollLeft = +10;
            scrollTop = 0;
            break;
        case "right":
            scrollLeft = -10;
            scrollTop = 0;
            break;
        case "bottom":
            scrollTop = +10;
            scrollLeft = 0;
            break;
        case "top":
            scrollTop = -10;
            scrollLeft = 0;
            break;
    }

    $("#scroll")
        .scrollLeft($("#scroll").scrollLeft() + scrollLeft)
        .scrollTop($("#scroll").scrollTop() + scrollTop);
});