Introduction:
This article shows how to create custom div scrollbars by using javascript.
Main:
The creation of custom scroll bars is something very interesting.It will give a very rich user interface.
First define scrollbars,
<div id="NetProgrammingHelp_scrollArea" style="position:absolute; left:740px; top:100px; width:9px; height:100%; z-index:4; background-color:skyblue; border-style:solid; border-color:#000 #fff #fff #000; border-width:1px; overflow:hidden"> <div id="NetProgrammingHelp_scroller" style="position:relative; width:15px; height:45px; background-color:#66f; border-style:solid; border-color:#fff #006 #006 #fff; border-width:2px; overflow:hidden; font-size:1px"> </div> </div> |
Define the custom scroll div,
<div id="NetProgrammingHelp_Container" style="position:absolute; left:418px; top:94.838px; width:308px; height:297px; z-index:1; background-color:#fff; border-left:solid #000 1px; border-top:solid #000 1px; overflow:hidden"> <div id="NetProgrammingHelp_Content" class="NetProgrammingHelp_Content f-x2" style="position:relative; width:292px; margin:5px 5px 5px 10px; overflow:visible"> <p><span class="NetProgrammingHelp_Content">Hi,I am Custom Scrollbar</span></p> </div> </div> |
Initiate the scrollbar in pageload,
<script type="text/javascript"> var NetProgrammingHelp_scroller = { init: function() { NetProgrammingHelp_scroller.docH = document.getElementById("NetProgrammingHelp_Content").offsetHeight; NetProgrammingHelp_scroller.contH = document.getElementById("NetProgrammingHelp_Container").offsetHeight; NetProgrammingHelp_scroller.NetProgrammingHelp_scrollAreaH = document.getElementById("NetProgrammingHelp_scrollArea").offsetHeight; NetProgrammingHelp_scroller.scrollH = (NetProgrammingHelp_scroller.contH * NetProgrammingHelp_scroller.NetProgrammingHelp_scrollAreaH) / NetProgrammingHelp_scroller.docH; if(NetProgrammingHelp_scroller.scrollH < 15) NetProgrammingHelp_scroller.scrollH = 15; document.getElementById("NetProgrammingHelp_scroller").style.height = Math.round(NetProgrammingHelp_scroller.scrollH) + "px"; NetProgrammingHelp_scroller.scrollDist = Math.round(NetProgrammingHelp_scroller.NetProgrammingHelp_scrollAreaH-NetProgrammingHelp_scroller.scrollH); Drag.init(document.getElementById("NetProgrammingHelp_scroller"),null,0,0,-1,NetProgrammingHelp_scroller.scrollDist); document.getElementById("NetProgrammingHelp_scroller").onDrag = function (x,y) { var scrollY = parseInt(document.getElementById("NetProgrammingHelp_scroller").style.top); var docY = 0 - (scrollY * (NetProgrammingHelp_scroller.docH - NetProgrammingHelp_scroller.contH) / NetProgrammingHelp_scroller.scrollDist); document.getElementById("NetProgrammingHelp_Content").style.top = docY + "px"; } } } onload = NetProgrammingHelp_scroller.init; </script> |
Refer the drag.js in html page,
<script type="text/javascript" src="NetProgrammingHelp_drag.js"></script> |
For download NetProgrammingHelp_drag.js,just click here,
Conclusion:
Hope,this helps,
Happy Coding.
please upload a example of this because i cannot get it to work, or mail me one, would be much apreciated