HTML+CSS scroll bar Style customization-for div,iframe, HTML, etc.

Friend said: These two days by the scroll bar the incomparable, here to summarize:

First, customize the browser scroll bar implementation principle: Calculate the height of the browser scrollbar, the height of level 1 is the same as the total height of the scrollbar, calculated by a similar proportion: Browser scrollbar total Height: scrollbar height = hierarchy ②: Level ①=>

For implementing a custom scroll wheel, you first need to understand the entire layout:

1, 1. Levels to display and 2. Relationships that need to be scrolled levels :

• Level 1 has an overflow hidden property in order to hide the portion of the hierarchy that is more than 2.
• Because the Layer 2 overflow hidden portion below the Level 1 package can be scrolled by controlling the scrolltop of level 1.

2, the position of the scroll bar:

• If you scroll behind by controlling the top value of Level 2, the scroll bar can be positioned directly relative to level 1.
• If you are scrolling through the scrolltop of Control Level 1, then the scrollbar needs to add a layer of wrapping around the outside so that the scroll bar does not roll up with level 1.

The method described here is 2--2.
Enter the following logical relationship:
1, first of all must be from the scroll bar:
To calculate the height of the scrollbar, it is important to note that the height of level 1 is the same as the total height of the scrollbar, calculated by a similar scale:
Scroll bar Total Height: scrollbar height = level 2: Level 1
= scroll bar height = total ScrollBar height/(Level 2/Level 1)
2--calculate the coordinates of the mouse drag scroll bar position, first of all to let the mouse click on the scroll bar which position, will be clicked scroll bar vertex coordinates:
By getting the y-coordinate of the browser-the scrollbar is clicked on the y-axis coordinates to get
3--the formula that implements the scrollbar drag:
Four elements, 1-the y-axis coordinates of the browser when dragging, 2-the y-coordinate of the scrollbar when clicked, 3-the value of the browser scrolltop, 4-The top value of the current container.
Formula: 1-2 + 3-4
Solution:
1-2 = calculate scroll bar vertex coordinates
1-2 + 3 = To prevent the browser y-axis coordinates from being affected by the scroll bar value, you must add the value of the browser scrolltop
1-2 + 3-4 = To prevent the scrollbar from being affected by the position of the container, you must first clear the top value of the container, that is, assuming they are all on the same y-axis vertex
4--limit the drag range of the scroll bar:
It's too simple to explain.
5--calculates the ratio of the current vertex value of the scrollbar to the limit value that the vertex can move:
Their proportions are calculated purely to control hierarchy 2 and Level 1. This is a dynamic ratio of 0-1

2. Everything is ready, and the rest is control Level 2 and Level 1:
The first step is to get the height of their two levels, and then calculate the limit values that the level 2 vertices can move.
Vertex movable limit value: Level 2-Level 1.
2--controls the scrolltop of Level 1, and the scrolling distance is echoed by the scroll bar:
Vertex movable limit value * ratio of scroll bar scrolling
3--completed.

After reading the principle, I understand, but practice up oneself feel trouble, therefore, search the next, decide to use plug-in solves:

1. Using the Jquery.nicescroll.min.js plugin

// jquery.nicescroll.min.js plug-in jquery.nicescroll v3. 7.6 1 . Support Div,iframe,html, etc. 2. Compatible with ie7-8, Safari,firefox,webkit Core Browser (Chrome,safari) and the scroll bar of the smart device browser 31.8 

Cursorcolor-Sets the scrollbar color, the default value is "#000000"Cursoropacitymin-scroll bar Transparency Minimum value Cursoropacitymax-scroll bar Transparency Maximum value cursorwidth-The width of the scroll bar pixels, default to 5 (You can write "5PX") Cursorborder-CSS defines the border, which defaults to "1px solid #FFF" Cursorborderradius-The border fillet of the scrollbar zindex-Z-Change of the div of the scroll barindex value, default value is 9999scrollspeed-scrolling speed, default value is 60mousescrollstep-scrolling the mouse wheel speed, the default value is 40 (pixels) Touchbehavior-Let the scroll bar drag the scrolling touch device by default to Falsehwacceleration-when using hardware-accelerated scrolling support, the default is Trueboxzoom-make the contents of the Zoom box default to Falsedblclickzoom-(only if boxzoom =TRUE) When the zoom starts, the double-click box defaults to Truegesturezoom-Boxzoom = True and use touch device) zoom (only when active, pitch/box, default to Truegrabcursorenabled "Grab" icon, display div Touchbehavior=true, the default value is Trueautohidemode, how to hide the scroll bar works, the real default/"Cursor" = cursor only hidden/FALSE =do not hide the background, change the railway background of the CSS, the default value is "" in Iframeautoresize, autoresize the Load event on the IFRAME (default:true) Cursorminheight, set the minimum scrollbar height (default value: -preservenativescrolling, you can scroll the local scrolling area with the mouse, bubbling the mouse wheel event (default:true) Railoffset, you can add offsets at the top of the/left rail position (default:falseBouncescroll to make the scrolling bounce end when the content moves (hardware Accell only) (default: FALSE) spacebarenabled, which allows the use of the SPACEBAR to scroll (default:true) railpadding, set the spacing (default: Top:0Right:0Left:0Bottom:0}) Disableoutline,chrome Browser, when disabling the outline (orange hightlight), select a div nicescroll (default:true）

nicescroll Detailed parameter configuration

In the essay html+css iframe has been an example of Jquery.nicescroll v3.7.6 to the iframe settings, now with the DIV set as an example:

<! DOCTYPE html>"Https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="Jquery.nicescroll.min.js"></script>"Div1"style="width:300px; height:200px; overflow:hidden; border:solid 1px Gray; padding:10px ; line-height:1.5;">HAHAWEFA1<br/>HAHAWEFA2<br/>Hahawefa3<br/>Hahawefaae<br/>Hahawefa<br/>Hahawefa<br/>Hahawefa<br/>HAHAWEFAF<br/>Hahawefa<br/>Hahawefafa<br/>awfawef<br/>Hahawefa<br/>Hahawefagag<br/>Hahawefa<br/>Hahawefa<br/>Hahawefa<br/>HAHAWEFAAF<br/>Hahawefa<br/>Hahawefaff<br/>hahawefafffff<br/> </div> <script>        $("#div1"). Nicescroll ({cursorcolor:"#E62020",//scroll bar ColorCursoropacitymax:0.5,//scroll bar TransparencyTouchbehavior:false, Cursorwidth:"10px", Cursorborder:"0", Cursorborderradius:"5px"        }); </script></body>Example: Using the plugin jquery.nicescroll.min.js to change the div scroll bar style
The results of the operation are as follows:
Reference:http://www.cnblogs.com/jiechen/p/4712631.html (custom scroll bar principle)
HTML+CSS scroll bar Style customization-for div,iframe, HTML, etc.