Custom scrollable div I'm trying to create a custom div scroller.  I got it working, but it's still a little rough around the edges. Please take a look..

DEMO

&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %&gt;

&lt;!DOCTYPE html&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head id="Head1" runat="server"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;style type="text/css"&gt;
        #content {
            margin-top: 100px;
            height: 500px;
            width: 500px;
            overflow: hidden;
            border: solid 1px red;
        }

        #scr {
            height: 100px;
            width: 100px;
            border: solid 1px black;
            background-color: #26a0eb;
            z-index: 3;
            opacity: 0;
            filter: alpha(opacity = 0);
        }


        #content:hover #scr {
            opacity: 0.1;
            filter: alpha(opacity = 10);
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;form id="form1" runat="server"&gt;
        &lt;div id="content"&gt;
            &lt;div id="scr"&gt;
            &lt;/div&gt;
            &lt;div id="container"&gt;
                &lt;script type="text/javascript"&gt;
                    var strContent = '';
                    for (var i = 1; i &lt; 101; i++) {
                        document.writeln(i + '&lt;br /&gt;');
                    }
                &lt;/script&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/form&gt;
    &lt;script type="text/javascript"&gt;

        window.onload = function () {
            draggable('scr');
        };

        var scr = null;
        function draggable(id) {
            var obj = document.getElementById(id);
            obj.style.position = "absolute";
            obj.onmousedown = function () {
                scr = obj;
            }
        }

        document.onmouseup = function (e) {
            scr = null;
        };

        document.onmousemove = function (e) {
            if (!e) e = window.event;
            var y = (e.pageY) ? e.pageY : e.clientY;

            if (scr == null)
                return;

            var c = document.getElementById('content');

            if ((y &gt;= c.offsetTop + 50) &amp;&amp; (y &lt; c.clientHeight + 50)) {
                var pct = (scr.offsetTop - c.offsetTop) / (c.clientHeight - 50);
                c.scrollTop = Math.floor(c.scrollHeight * pct);
                scr.style.top = y - 50 + 'px';
            }
        };
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
Just focusing on the Javascript:


I feel a urge to to reference a story about a monk. Instead I'll just say that descriptive names will help when you come back to your code or when others try to read it.
for example:

var obj = document.getElementById(id);
obj.style.position = "absolute";
obj.onmousedown = function () {
    scr = obj;
}


Here it would be better to name obj something like draggableElement or some such. this was I know instantly what we are referring to.  
You are testing e and pageY and assigning a variable in two different way. Pick one way and be consistent about it. It really matters not what you choose so much as sticking to it.

Here are a couple of different ways you could do it.


if

if (!e) e = window.event;
var y = e.pageY;
if(!y) y = e.clientY;

ternary

e = e ? e : window.event;
var y = e.pageY ? e.pageY : e.clientY;

or 

e = e || window.event;
var y = e.pageY || e.clientY;



I personally favour this last way.