Custom scroll bar 3.0_javascript tips

1. Supports beautification extensions in any form (including image customization), cross-browser support
2. Support mouse to hold down the up and down arrow buttons to scroll up and down
3. Supports scrolling by placing the mouse wheel in the "scroll bar area", not only in the scrolling content area
4. Supports the mouse to hold down the scroll bar (without releasing it) and move it out of the scroll area to still drag and scroll
5. The scroll bar is proportional to the height of the scrolling content on the left and the height of the visible area. When the scroll bar is thin to a certain extent, the minimum height value is set. When the content is too small, the scroll bar is hidden
6. Supports mouse click on the upper and lower blank areas of the scroll bar to achieve up and down positioning scrolling (simulating windows scroll bars)
7. Supports up and down arrow keys on the keyboard. After the scroll area is scrolled, it is the page body's turn to scroll
8. Supports retaining the scroll bar scroll position after page refresh (requires browser support or turning on cookies)
9. Place the mouse in the custom scroll area and scroll the wheel. After the scroll area is scrolled, it is the page body's turn to scroll
10. The code is refactored based on the previous versions. This time, you only need to add a class named "dumascroll" to the rendered div to automatically render. Those without this class will not be affected
11. Fixed bugs found in previous versions: Previous versions

Future versions can continue to expand The functions are :
1, Add support for "downward" fast scrolling of the space bar (to better simulate the windows scroll bar user experience)
2, Add rendering support for page body
3. Add rendering support for textarea
4. Add rendering support for nested divs (there is currently a scrolling bug when the code is nested) , the scroll height algorithm of nested divs will be significantly modified in this version)
5. Add support for simultaneous horizontal scroll bars (can be expanded when there is a need for this)

Demonstration:

<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:20px; line-height:160%; } ul li { color:#f00; } .a1 { width:300px; height:190px; 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 {} /*Just set this class to the div that needs to render the scroll bar*/ .dumascroll_area { height:100%; overflow:hidden; } .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; user-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-position:-56px 0; } .dumascroll_arrow_down { background-position:-70px 0; } .dumascroll_arrow_down_a { background-position:-84px 0; }</style> <div class="a dumascroll b" style="width:300px; height:190px; padding:5px; border:1px solid #f00; line-height:400%; overflow:hidden;"> <br> I was the first one to be rendered, what a pity<br>I was the first one to be rendered, what a pity<br>I was the first one to be rendered, what a pity<br>I was the first one to be rendered , so unfortunate<br>I am the first one to be rendered, so unfortunate<br>I am the first one to be rendered, so unfortunate<br>I am the first one to be rendered, so unfortunate<br>I am The first one to be rendered, what a pity<br>I am the first one to be rendered, what a pity<br>I am the first one to be rendered, what a pity<br>I am the first one to be rendered, what a pity Unfortunately <br> I am the first one to be rendered, so unfortunate <br> I am the first one to be rendered, so unfortunate <br> I am the first one to be rendered, so unfortunate <br> I am the first It</div>