Home > Developer > JavaScript
Javascript sliderbar
A good JavaScript simulated scroll bar, elegant prototype writing. There is nothing to say. Download it if you need it,
<Br/> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> </title> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <br/> <meta name =" keywords "content =" "/> <br/> <meta name =" description "content =" "/> <br/> <meta name = "robots" content = "all"/> <br/> <style type = "text/css"> </p> <p> * {margin: 0; padding: 0 ;}< br/> body {padding: 50px; font-size: 12px; line-height: 18px ;}< br/># scrollBox, <br/> # scrollBox2 {width: 100px; height: 200px; border-right: 1px solid # f00; padding: 0 5px 0 0; position: relative ;} <br/>. scrollContent {height: 200px; background: # efefef; overflow: hidden;} <br/>. scrollBar {width: 6px; height: 20px; background: # ccc; position: absolute; right:-4px; top: 0 ;} </p> </style> <br/> </pead> <br/> <body> <br/> <div id = "scrollBox"> <br /> <div class = "scrollContent"> <br/> <ul> <br/> <li> GS security standard, ensure full combustion, and always monitor the gas environment at home, secure and carefree </li> <br/> <li> remote control technology via wireless wall, capable of wearing a three-layer wall, remote control 30 meters </li> <br/> <li> precise thermostatic technology, outlet temperature deviation shall not exceed ± 1 ℃ </li> <br/> <li> flawless design, refined lifestyle </li> <br/> </ul> <br/> </div> <br/>/> <div id = "scrollBox2"> <br/> <div class = "scrollContent"> <br/> <ul> <br/> <li> GS security standard, ensure full combustion, and always monitor the gas environment at home, secure and carefree </li> <br/> <li> remote control technology via wireless wall, capable of wearing a three-layer wall, remote control 30 meters </li> <br/> <li> precise thermostatic technology, outlet temperature deviation shall not exceed ± 1 ℃ </li> <br/> <li> flawless design, refined taste of life </li> <br/> <li> Germany's scholar panel, perfect Combination of technology and art </li> <br/> <li> power-off memory function, after power-on, it is automatically restored to the last set water temperature </li> <br/> <li> bathtub Water Injection function, free choice of bath mode </li> <br/> <li> smart wind pressure technology, Smart Security Control </li> <br/> <li> LED display, smart touch buttons </li> <br/> <li> water saving design, display water consumption, reminder to save water </li> <br/> <li> 3L/min ultra-low flow start, not limited by water pressure, meets the needs of senior users and low-pressure users </li> <br/> <li> multiple security protection measures, always family care </li> <br/> </ul> <br/> </div> <br/> <script type =" text/javascript "> <br/> function scroll (id) {<br/> var self = this; <br/> this. obj = document. getElementById (id); <br/> this. content = this. obj. getElementsByTagName ('div ') [0]; <br/> this. bar = document. createElement ('div '); <br/> this. bar. className = 'scrollbar'; <br/> this. bar. style. marginTop = 0; <br/> this. bar. style. height = parseInt (this. obj. offsetHeight/this. content. scrollHeight * this. obj. offsetHeight) + 'px '; <br/> // parseInt (this. area. offsetHeight/this. area. scrollHeight * (this. bar. offsetHeight-this. arrowUpHeight-this. arrowDownHeight); <br/> // this. bar. innerHTML = id; <br/> this. obj. appendChild (this. bar); <br/> this. bar. y; <br/> this. srcElement; <br/> this. marginTop; <br/> this. bar. onmousedown = function (e) {self. mousedown (e) ;}< br/>}< br/> scroll. prototype = {<br/> mousedown: function (e) {<br/> var self = this; <br/> var e = e | window. event; <br/> self. bar. y = e. clientY; <br/> self. bar. t = parseInt (self. bar. style. marginTop); <br/> document. onmousemove = function (e) {self. mousemove (e) ;}< br/> stopDefault (e); <br/>}, <br/> mousemove: function (e) {<br/> var e = e | window. event; <br/> this. marginTop = this. bar. t + (e. clientY-this. bar. y); <br/> if (this. marginTop <0) {<br/> this. marginTop = 0; <br/>}< br/> if (this. marginTop> this. obj. clientHeight-this. bar. offsetHeight) {<br/> this. marginTop = this. obj. clientHeight-this. bar. offsetHeight; <br/>}< br/> this. bar. style. marginTop = this. marginTop + 'px '; <br/> this. content. scrollTop = (this. content. scrollHeight-this. obj. offsetHeight) * parseInt (this. marginTop)/(this. obj. clientHeight-this. bar. clientHeight); <br/> document. onmouseup = function (e) {document. onmousemove = null ;}< br/> stopDefault (e); <br/>}< br/> function stopDefault (e) {<br/> if (e & e. preventDefault) <br/> e. preventDefault (); <br/> else <br/> window. event. returnValue = false; <br/> return false; <br/>}</p> <p> var p = new scroll ('scrollbox '); <br/> var p2 = new scroll ('rollbox2 '); <br/> </script> <br/> </body> <br/> </ptml> <br/>
Run code
* Source Network
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
