div + css (javascript) 사용자 정의 스크롤 바

    
    
    
    
    
    
    window.onload = function() {
        var content = document.getElementById("content");
        var scrollbar = document.getElementById("scrollbar");
        var scrollbarp = document.getElementById("scrollbarp");

        scrollbar.onmousedown = function(e) {
            //       ，      top
            var e = e || window.event;
            /***
                     ,  Y     
                            

                             ，         
                     ，           



            ***/
            var disY = e.clientY - this.offsetTop;
            var TMax = scrollbarp.offsetHeight - scrollbar.offsetHeight;
            // contentMaxT--     div   top 
            var contentMaxT = content.offsetHeight-contentWrapper.offsetHeight;
           
            console.log("down: disY : "+disY+"  cy: "+e.clientY+"-----top： "+this.offsetTop);
            if(scrollbar.setCapture){
            	scrollbar.setCapture();
            }
            document.onmousemove = function(ev) {            	
                var ev = ev || window.event;
                var T = ev.clientY - disY;
                if (T < 0) {
                    T = 0;
                }
                if (T > TMax) {
                    T = TMax;
                }
                var scale = T / TMax;
                content.style.top = -scale * contentMaxT+"px";
                console.log("disY  " + disY + "  cy  " + ev.clientY + "  T  " + T);
                scrollbar.style.top = T + "px";
                return false;
            }

            document.onmouseup = function() {
                document.onmouseup = document.onmousemove = null;
                if(scrollbar.releaseCapture){
            	scrollbar.releaseCapture();
            }
            }

            return false;
        }
    }
    



    


        
        	
            0                             
            1                  
            2                  
            3                  
            4                  
            5                  
            6                  
            7                  
            8                  
            9                  
            0                  
            1                  
            2                  
            3                  
            4                  
            5                  
            6                  
            7                  
            8                  
            9                  
            0                  
            1                  
            2                  
            3                  
            4                  
            5                  
            6                  
            7                  
            8                  
            9                  
            0                  
            0                             
            1                  
            2                  
            3                  
            4                  
            5                  
            6                  
            7                  
            8                  
            9                  
            0                  
            1                  
            2                  
            3                  
            4                  
            5                  
            6                  
            7                  
            8                  
            9                  
            0                  
            1                  
            2                  
            3                  
            4                  
            5                  
            6                  
            7                  
            8                  
            9                  
            0                  
            0                             
            1                  
            2                  
            3                  
            4                  
            5                  
            6                  
            7                  
            8                  
            9                  
            0                  
            1                  
            2                  
            3                  
            4                  
            5                  
            6                  
            7                  
            8                  
            9                  
            0                  
            1                  
            2                  
            3                  
            4                  
            5                  
            6                  
            7                  
            8                  
            9                  
            0                  
            0                             
            1                  
            2                  
            3                  
            4                  
            5                  
            6                  
            7                  
            8                  
            9                  
            0                  
            1                  
            2                  
            3                  
            4                  
            5                  
            6                  
            7                  
            8                  
            9                  
            0                  
            1                  
            2                  
            3                  
            4                  
            5                  
            6                  
            7                  
            8                  
            9                  
            0                  
            0                             
            1                  
            2                  
            3                  
            4                  
            5                  
            6                  
            7                  
            8                  
            9                  
            0                  
            1                  
            2                  
            3                  
            4                  
            5                  
            6                  
            7                  
            8                  
            9                  
            0                  
            1                  
            2                  
            3                  
            4                  
            5                  
            6                  
            7                  
            8                  
            9                  
            0