jquery Pan.js Kinetic Scrolling Example

Kinetic scrolling is the default method of mouse control.

Click and drag to pan the contact list to the right. If you release the mouse whilst panning, you'll see the list continue to scroll with the speed you gave it whilst dragging.

The kineticDamping option controls how quickly the content will come to rest after being released whilst in motion

<style type="text/css">
  #container {
    border: 1px #ff8800 solid;
    width: 200px;
    height: 450px;
    overflow: hidden;
    position: relative;
  }

  #content {
    width: 200px;
    background-color: #333333;
    position: absolute;
    left: 0px;
    top: 0px;
    padding:  0px;
    margin: 0px;
  }

  .contact {
    height: 50px;
    width: 190px;
    border-radius: 3px;
    background-color: #777777;
    padding: 0px;
    margin: 5px 5px 15px 5px;
  }
</style>

<div id="container">
  <div id="content">
    <div class="contact">
      <p>John Snow</p>
      <a href="#">[email protected]</a>
    </div>
    <!-- ...snip... -->
  </div>
</div>

<script type="text/javascript">
  $('#container').pan({kineticDamping: 0.85});
</script>