Principle of custom scroll bars, custom scroll bars

Principle of custom scroll bars, custom scroll bars
To implement a custom scroll wheel, you must first understand the entire layout:

1. The hierarchy to be displayed and 2. The relationship between the hierarchy to be rolled:
1 -- level 1 has an overflow hidden attribute to hide more than level 2.
2 -- level 2 Overflow hidden section under Level 1 package can be rolled by controlling level 1's scrollTop.
2. Position of the scroll bar:
1 -- If you scroll through the top value of control level 2, the scroll bar can be absolutely positioned relative to level 1.
2 -- If you scroll through the scrollTop of control level 1, you need to add a layer of package layer to the scroll bar so that the scroll bar does not roll up with Level 1.
Here I use 2-2.

Enter the logical relationship as follows:
1. First, you must start with the scroll bar:
1 -- calculate the height of the scroll bar. here we need to note that the height of level 1 is the same as the total height of the scroll bar. It is calculated through a similar proportion:
Total scroll bar height: Scroll Bar Height = level 2: Level 1
=> Scroll bar Height = total scroll bar height/(level 2/level 1)
2 -- calculate the coordinates of the scroll bar when the mouse is dragging. First, let the mouse change to the vertex coordinates of the scroll bar no matter which position the mouse is clicked:
Obtain the Y axis coordinates of the browser-the Y axis coordinates clicked on the scroll bar.
3 -- Implement the scroll bar dragging formula:
Four elements: 1-the Y axis coordinate of the browser when dragging, 2-the Y axis coordinate of the scroll bar when clicking, 3-The scrollTop value of the browser, and 4-the top value of the current container.
Formula: 1-2 + 3-4
Solution:
1-2 => calculate the vertex coordinates of the scroll bar
1-2 + 3 => to avoid the browser's Y axis coordinate being affected by the scroll bar value, the browser's scrollTop value must be added.
1-2 + 3-4 => to prevent the scroll bar from being affected by the container location, you must first clear the top value of the container, That is, assuming that they are all on the same Y axis vertex.
4 -- restrict the drag range of the scroll bar:
It is too simple to explain.
5 -- calculate the ratio of the current vertex value of the scroll bar to the limit value of the vertex movement:
Calculate their proportions purely to control level 2 and level 1. This is a dynamic 0-1 ratio.

2. Everything is ready, and the rest is Control Level 2 and Level 1:
1 -- first obtain the two levels of height, and then calculate the limit value of level 2 vertex mobility.
Vertex mobility limit value: Level 2-Level 1.
2 -- control the scrollTop of level 1. The scroll distance matches the scroll bar:
Vertex movable limit value * Ratio of scroll bar
3 -- complete.

 

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