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

    
    
        #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);
        }
    

    
        
            
            
            
                
                    var strContent = '';
                    for (var i = 1; i ');
                    }
                
            
        
    
    

        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 >= c.offsetTop + 50) && (y 

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.

StackExchange Code Review Q#32077, answer score: 3