panning window

http://stackoverflow.com/a/11888281/922168

by nickaknudson

HTML

<div id="viewWindow">
    <div id="viewArea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor metus eget tortor dignissim pretium. Donec egestas dui eget nisl varius et adipiscing dolor faucibus. Aenean nulla libero, accumsan in varius sed, blandit molestie nunc. Pellentesque eu sapien sem, vitae eleifend metus. Vivamus et sem lacus. Donec convallis accumsan nisi. Morbi rutrum, diam ac tempor rutrum, urna ipsum mollis nunc, ut vestibulum neque lorem vel libero. Ut ut libero risus.

Integer nisl orci, ullamcorper sed porta sed, aliquet ac risus. Quisque ut libero non est faucibus ultricies et et justo. In magna massa, mollis sed mollis ut, eleifend in ligula. Curabitur orci mauris, aliquam quis iaculis sit amet, aliquam non turpis. Proin scelerisque blandit mauris, eu accumsan eros rhoncus vel. Sed dignissim fermentum nisl ut iaculis. Maecenas mattis rhoncus cursus. Curabitur blandit quam orci, sit amet blandit ligula. Aenean imperdiet placerat ipsum congue posuere. Proin ut neque purus. Ut augue nulla, malesuada ac gravida vitae, iaculis sit amet sem. Donec lacinia est quis lectus consectetur congue. Nullam eu ultricies dui. Integer venenatis feugiat nisl, a tempus massa dapibus in.

Nunc suscipit, nisi in ultrices convallis, leo mauris dapibus ipsum, ac condimentum ipsum libero at nulla. Sed varius lobortis erat, nec malesuada velit convallis iaculis. Cras sit amet lorem est, et commodo ligula. Curabitur nunc urna, auctor in fringilla quis, vehicula pulvinar libero. Nullam ut lorem nunc, nec bibendum mauris. Phasellus sed enim ut arcu placerat bibendum vel eget nisl. Duis nisl ipsum, adipiscing a lobortis in, pellentesque eget enim. Vivamus quis lectus vitae eros porttitor ultrices.

Morbi leo ante, dignissim vel ultrices consectetur, scelerisque eu ipsum. Donec hendrerit leo scelerisque nibh pretium et porttitor elit aliquet. Aliquam mollis, lorem pulvinar blandit auctor, dui odio adipiscing enim, et ornare mauris lorem eu justo....

CSS

body {
    background-color:red;
}
#viewWindow {
    overflow:hidden;
    height:200px;
    width:200px;
    margin:10px;
}
#viewArea {
    overflow:hidden;
    background-color:green;
    height:500px;
    width:500px;
}

JavaScript

$(document).ready(function(){
   $('#viewArea').draggable(); 
});