Drag Scrolling

Allows click+dragging a div to scroll the content

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
    <p id="mouse">X</p>
    <div id="test">
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum whatever</p>
        <p>Lorum ipsum...

CSS

#test{
          max-width:100px;
        }
        
        #test *{
          display:inline-block;
        }
        
        .cds {
            border: 1px solid Silver;
        }

JavaScript

(function($)
{
    // This script was written by Steve Fenton
    // http://www.stevefenton.co.uk/Content/Jquery-Content-Drag-Scroller/
    // Feel free to use this jQuery Plugin
    // Version: 0.0.1
    
    var contentdragscrollerCount = 0;
    
    $.fn.contentdragscroller = function (settings) {
    
        var config = {
            classModifier: "cds",
            easing: "linear", // recommend "easeOutExpo" - requires jQuery Easing plugin
            velocityFactor: 1,
            velocityCheckWait: 50,
            afterScrollDuration: 1000,
            cursor: "n-resize",
            width: "20%",
            height: "200px"
        };
        
        if (settings) {
            $.extend(config, settings);
        }
        
        var gesturesX = 0;
        var gesturesY = 0;
        
        var startPosition = 0;
        var startScrollTop = 0;
        var velocity = 0;
        var isMouseDown = false;
        
        var timer;
        
        function GetVelocity() {
            velocity = startPosition - gesturesY;
            timer = window.setTimeout(GetVelocity, config.velocityCheckWait);
        }
        
        return this.each(function () {

            var id = config.classModifier + contentdragscrollerCount;
        
            $This = $(this);
            $This.wrap("<div id=\"" + id + "\" class=\"" + config.classModifier + "\"></div>");
            
            $Container = $("#" + id);
            
            $Container.css({ 
                width: config.width, 
                height: config.height, 
                overflow-x: "auto",
                cursor: config.cursor
            });
                
            // Detects mouse position and performs real-time scroll
            $(document).mousemove( function (e) {
                gesturesX = parseInt(e.pageX, 10);
                gesturesY = parseInt(e.pageY, 10);
                $("#mouse").html(gesturesY);
                if (isMouseDown) {
                    var...