A good JavaScript simulated scroll bar

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.