<?xml version="1.0" encoding="UTF-8"?><!--DocType--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><!--Start HTML--><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <!--Head--> <head> <!--Meta data--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--Title--> <title>Custom Scroll Bar Test</title> <!--css--> <style type="text/css"> #body{ width: 300px; height: 500px; overflow: auto; margin: auto; overflow: hidden; position: relative; padding: 0px; background-color: black; color: white; padding: 2px; } #scroll{ float: right; position: relative; text-align: right; width: 10px; height: 20px; background-image:url('scroll.png'); padding: 0px; margin: 0px; } #scrollBar{ height = 500px; } #content{ position: absolute; width: 284px; padding-right: 16px; } </style> <!--Javascript--> <script type="text/javascript"> var mouseY = 0; var mouseDown = 0; var scrollRatio = 0; //When the page loads function load(){ //adding the event listerner for Mozilla if(window.addEventListener) document.getElementById('body').addEventListener('DOMMouseScroll', mScroll, false); //for IE/OPERA etc document.getElementById('body').onmousewheel = mScroll; } //scroll by an amount function scroll(x){ var currPos=document.getElementById('content').offsetTop; var docHeight = document.getElementById('content').offsetHeight; var scrollHeight = document.getElementById('scroll').offsetHeight; var bodyHeight = document.getElementById('body').offsetHeight; //calculating the next position of the object currPos=parseInt(currPos)+(x); if (currPos > 0) currPos = 0; if (-currPos > -bodyHeight+docHeight) currPos = bodyHeight-docHeight; var scrollRatio = currPos/(bodyHeight-docHeight); //moving the position of the object document.getElementById('content').style.top = currPos+"px"; document.getElementById('scroll').style.top = scrollRatio * (bodyHeight - scrollHeight - 4 ) + "px"; } //when the mousewheel is used function mScroll(event){ var delta = 0; if (!event) event = window.event; // normalize the delta if (event.wheelDelta){ //idiot browsers delta = event.wheelDelta / Math.abs(event.wheelDelta); } else if (event.detail){ //real browsers delta = -event.detail / 3; } scroll(delta * 10); } function mClick(event){ mouseDown = 1; //mouseY = event.pagey; } function mMove(event){ if (mouseDown != 0){ var docHeight = document.getElementById('content').offsetHeight; var scrollHeight = document.getElementById('scroll').offsetHeight; var bodyHeight = document.getElementById('body').offsetHeight; scroll((mouseY - event.pageY)*(docHeight-bodyHeight)/(bodyHeight-scrollHeight+4)); } mouseY = event.pageY; } </script> <!--Close the head--> </head> <!--Body--> <body onload="load();" onmousemove="mMove(event);" onmouseup="mouseDown = 0;"> <div id="body"> <div id = "content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia mattis tincidunt. Nulla quis ultricies justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed sagittis dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla nec ligula non ligula rhoncus pulvinar. Praesent venenatis orci eget sapien accumsan iaculis. Aliquam iaculis nisl vel est consectetur convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <br/><br/> Sed ultricies tellus in odio consequat eget convallis turpis auctor. Integer quis justo eget massa tristique feugiat. Sed nisl sem, faucibus sed tincidunt vitae, sodales eget risus. Aliquam dignissim accumsan elit, vel egestas dui mollis ac. Ut varius pharetra augue vitae porta. Morbi bibendum erat ut dolor malesuada accumsan condimentum libero malesuada. Nunc et lectus at urna condimentum molestie vel at ante. Morbi ut massa at enim pharetra adipiscing quis id enim. Duis et fringilla odio. Nullam volutpat faucibus convallis. Aenean vel adipiscing risus. Nullam vel lacus sit amet arcu pharetra feugiat. Mauris vel eros quis ante sagittis fringilla id vel nunc. <br/><br/> Aliquam a tellus velit, eget posuere orci. Sed nibh nulla, accumsan a commodo at, scelerisque eget lacus. Nulla facilisi. Aenean posuere scelerisque augue, et fermentum justo tempus vel. Suspendisse euismod dolor et risus sodales accumsan. Aliquam ut ligula eu urna fermentum cursus. Vestibulum at nibh lectus. Nunc at elit nulla. <br/><br/> Donec lacinia, felis id malesuada mattis, mi nulla pellentesque risus, eget tristique lectus augue eu tortor. Mauris scelerisque luctus neque eu semper. Mauris vel magna nec orci condimentum auctor. Maecenas et felis adipiscing leo ornare molestie in eu quam. Pellentesque sem orci, viverra eget varius vitae, elementum ut odio. Morbi et ipsum mauris. Sed facilisis sem in lectus egestas commodo vel ac orci. Nullam in tellus arcu, ac pharetra nibh. Pellentesque neque turpis, dictum eu fringilla at, malesuada vitae libero. Cras interdum mi ac elit pellentesque ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ac nisl metus. Phasellus quis euismod ipsum. Quisque sagittis, quam ut consequat placerat, ipsum dolor rhoncus nulla, sit amet laoreet massa est semper quam. <br/><br/> Praesent vestibulum mattis massa ac varius. Vestibulum auctor magna sit amet libero interdum laoreet. Nullam ac magna vitae odio elementum dapibus vel ac leo. Nullam a nisl ac quam facilisis auctor. Nulla facilisi. Nullam luctus varius nibh, vel lacinia lacus aliquet vitae. Mauris turpis elit, pretium et dictum sed, porta eget nibh. Pellentesque feugiat posuere elit, ut iaculis nunc adipiscing nec. Donec congue est eu eros faucibus sit amet placerat dui varius. Integer in nisi ac tortor tincidunt dignissim eget eget ipsum. Suspendisse tristique rhoncus porta. Sed dignissim egestas malesuada. Aenean ornare posuere blandit. </div> <div id="scroll" onmousedown="mClick(event); return false;"> </div> </div> <div id="info"></div> </body></html>