About the principle of custom scroll bars

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:
The level 1 has an overflow hidden property, which is intended to hide the portion of the Level 2.
2--because the Layer 2 overflow hidden section 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.
2--If you are scrolling by controlling the scrolltop of 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 way I use it 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.

Reprinted from: http://www.cnblogs.com/jiechen/p/4712631.html

About the principle of custom scroll bars