Custom scroll bar 3.0

1. Supports beautification extension in any form (including custom images) and cross-browser support
2. Allows you to scroll up and down with the mouse and down arrow buttons.
3. You can scroll the scroll wheel in the "scroll bar area", but not only in the scrolling content area.
4. You can move the cursor to the scroll bar (not released) and move it out of the scroll area.
5. The scroll bar is based on the ratio of the left-side scroll content height to the visible area height. When the scroll bar is refined to a certain extent, the minimum height value is set. When the content is too small, the scroll bar is hidden.
6. You can click the upper and lower positions in the upper and lower spaces of the scroll bar to scroll up and down (simulating windows scroll bars)
7. Supports up and down arrow keys on the keyboard. The page body is rolled only after the rolling area is finished.
8. You can retain the scroll position of the scroll bar after page refreshing (the browser must support or enable cookie)
9. Move the cursor to the scroll wheel of the custom scroll area. The page body is rolled only after the scroll area is finished.
10. Code refactoring based on the previous versions. This time, you only need to append a class named "dumascroll" to the rendered div to automatically render the rendering, without this class being affected
11. Fixed bugs found in previous versions: Previous versions

Functions that can be expanded in future versions include::
1, Added the "bottom" quick scroll support for space bar keys (better simulation of windows scroll bar user experience)
2, Added page body rendering support
3, Added rendering support for textarea.
4, Added support for rendering nested div (currently there is a rolling bug in code nesting, which will be greatly modified when the nested div's rolling height algorithm reaches this version)
5, Added support for horizontal scroll bars (which can be expanded when needed)

Demo:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> </title> <style type =" text/css "> * {margin: 0; padding: 0;} body {margin: 20px 0 400px 20px; font: 12px Arial;} h1 {font-size: 14px;} ol, ul {margin: 20 Px; line-height: 160%;} ul li {color: # f00 ;}. a1 {width: 300px; height: pixel PX; border: 1px solid # f00; overflow: auto ;}. a2 {width: 600px; height: 350px; margin: 100px 0 100px 80px; border: 1px solid #369; background: # eee url (http://www.blueidea.com/articleimg/2009/07/6875/duma.gif) no-repeat 50%; overflow: auto ;}. dumascroll {}/* you only need to set this class for the div whose scroll bar needs to be rendered */. dumascroll_area {height: 100%; overflow: hid Den ;}. dumascroll_bar ,. dumascroll_handle ,. dumascroll_handle_a ,. dumascroll_arrow_up ,. dumascroll_arrow_up_a ,. dumascroll_arrow_down ,. dumascroll_arrow_down_a {background-image: url (http://www.blueidea.com/articleimg/2009/07/6875/un_bg_bar.gif );}. dumascroll_bar {position: absolute; top: 0; right: 0; z-index: 9; width: 14px; height: 100%; cursor: default;-moz-user-select: none;-khtml-user-select: none; use R-select: none; background-repeat: repeat-y; background-position:-42px 0; float: left ;}. dumascroll_arrow_up ,. dumascroll_arrow_up_a ,. dumascroll_handle ,. dumascroll_handle_a ,. dumascroll_arrow_down ,. dumascroll_arrow_down_a {position: absolute; left: 0 ;}. dumascroll_arrow_up ,. dumascroll_arrow_up_a ,. dumascroll_arrow_down ,. dumascroll_arrow_down_a {width: 100%; height: 14px; color: # fff; text-align: center ;}. Dumascroll_arrow_up ,. dumascroll_arrow_up_a {top: 0 ;}. dumascroll_arrow_down ,. dumascroll_arrow_down_a {bottom: 0 ;}. dumascroll_handle ,. dumascroll_handle_a {width: 100%; background-repeat: repeat-y ;}. dumascroll_arrow_up {background-position: 0 0 ;}. dumascroll_arrow_up_a {background-position:-14px 0 ;}. dumascroll_handle {background-position:-28px 0 ;}. dumascroll_handle_a {background-positi On:-56px 0 ;}. dumascroll_arrow_down {background-position:-70px 0 ;}. dumascroll_arrow_down_a {background-position:-84px 0 ;}</style> </pead> <body> I am the first rendered, unfortunately <br> I was the first to be rendered, unfortunately <br> I was the first to be rendered, unfortunately <br> I was the first to be rendered, unfortunately <br> I was the first to be rendered, unfortunately <br> I was the first to be rendered. Unfortunately <br> I was the first to be rendered, Unfortunately <br> I am still normal. I don't want to be rendered, so I don't need your class. How can I deal with it? Haha! <Br> I am still normal. I don't want to be rendered, so I don't need your class. How about taking me? Haha! <Br> I am still normal. I don't want to be rendered, so I don't need your class. How about taking me? Haha! <Br> I am still normal. I don't want to be rendered, so I don't need your class. How about taking me? Haha! <Br> I am still normal. I don't want to be rendered, so I don't need your class. How about taking me? Haha! <Br> I am still normal. I don't want to be rendered, so I don't need your class. How about taking me? Haha! <Br> I am still normal. I don't want to be rendered, so I don't need your class. How about taking me? Haha! <Br> if it is rendered, I don't need your class. How can I use it? Haha! <Br> I am still normal. I don't want to be rendered, so I don't need your class. How about taking me? Haha! <Br> I am still normal. I don't want to be rendered, so I don't need your class. How about taking me? Haha! <Br> I am still normal. I don't want to be rendered, so I don't need your class. How about taking me? Haha! <Br> 22222 <br> unfortunately, I was rendered by nested rendering. 555555 <br> unfortunately, I was rendered by nested rendering, 555555 <br> it's unlucky. I am still rendered by nesting. 555555 <br> it's unlucky. I am still rendered by nesting. 555555 <br> it's unlucky, 555555 <br> unfortunately, 555555 is nested and rendered. <br> unfortunately, I was nested and rendered, 555555 <br> it's unlucky. I am still rendered by nesting. 555555 <br> it's unlucky. I am still rendered by nesting. 555555 <br> it's unlucky, 555555 <br> unfortunately, 555555 is nested and rendered. <br> unfortunately, I was nested and rendered, 555555 <br> it's unlucky. I am still rendered by nesting. 555555 <br> it's unlucky. I am still rendered by nesting. 555555 <br> it's unlucky, I am still nested and rendered, 555555 <Br> unfortunately, I was still rendered by nesting. 555555 <br> unfortunately, I was still rendered by nesting. 555555 <br> You are stupid. Nesting is nested, if you don't use his class, you won't be rendered. Look at me and envy me. <br> You're stupid. Nesting is nested. If you don't use his class, you won't be rendered. Look at me, envy <br> you are stupid, nesting is nested, you won't be rendered without his class, you look at me, envy it <br> you are stupid, nesting is nested, if you don't use his class, you won't be rendered. Look at me and envy me. <br> You're stupid. Nesting is nested. If you don't use his class, you won't be rendered. Look at me, envy <br> you are stupid, nesting is nested, you won't be rendered without his class, you look at me, envy it <br> you are stupid, nesting is nested, if you don't use his class, you won't be rendered. Look at me and envy me. <br> You're stupid. Nesting is nested. If you don't use his class, you won't be rendered. Look at me, envy <br> you are stupid, nesting is nested, and you won't be rendered without his class. Look at me and envy me <br> <Br> 11111111 <br> fsdfs <br> 11111111 <br> fsdfs <br> 11111111 <br> fsdfs <br> 11111111 <br> fsdfs <br> 11111111 <br> fsdfs <br> 11111111 <br> fsdfs <br> 11111111 <br> fsdfs <br> 11111111 <br> fsdfs <br> 11111111 <br> fsdfs <br> 11111111 <br> fsdfs <br> 11111111 <br> fsdfs <br> 11111111 <br> fsdfs <br> 11111111 <br> fsdfs <br> 11111111 <br> fsdfs <br> 11111111 <br> fsdfs <br> 11111111 <br> fsdfs <br> 11111111 <br> fsdfs <br> 11111111 picture custom scroll bar 3.0 (Duma "auto-rendering version ", Maybe everything in the world will change, but the sincere love will always be in our hearts !) <Ol> <li> supports beautification extension in any format (including custom images, cross-browser support </li> <li> allows you to scroll up or down by holding the top or down arrow buttons </li> <li> you can scroll down the scroll wheel in the "scroll bar" area, not only is it limited to the scroll content area for Rolling </li> <li> you can press and hold the scroll bar (not released) you can drag and drop the scroll bar to scroll out of the scroll area. </li> <li> the scroll bar shows the ratio of the left-side scroll content height to the visible area height, and when the scroll bar is refined to a certain extent, set the minimum height value, when the content is too small, hide the scroll bar </li> <li> you can click the upper and lower positions in the upper and lower blank sections of the scroll bar to scroll down (simulate windows scroll bar) </li> <li> supports up and down arrow keys on the keyboard, the page body is rolled after the scroll area is rolled out. </li> <li> the scroll bar position is refresh and retained (the browser must support or enable the cookie) </li> <li> move the cursor to the scroll wheel of the custom scroll area. The page body is rolled only after the scroll area is rolled. </li> <li> After code refactoring, you only need to append a class named "dumascroll" to the rendered div to automatically render it, this class is not affected. </li> <li> fixed bugs found in previous versions: previous versions </li> </ol>: <ul> <li> added the space bar key's "bottom direction" quick scrolling support (better simulation of windows scroll bar user experience) </li> <li> added page body rendering support </li> <li> added textarea rendering support </li> <li> added nested div rendering support (currently A rolling bug occurs during code nesting, the nested div's rolling height algorithm will be greatly modified when it reaches this version) </li> <li> added support for horizontal scroll bars (which can be expanded when needed) </li> </ul> <p> I hope you can help us find new bugs and provide valuable suggestions. I believe the next version will be better. Thank you (QQ: 149561420, gTalk: dumachuixuf @ g Mail.com ). </P> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]