Custom scroll bar principle

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

1.1. The Levels to display and2. The relationship that needs to be scrolled level:
TheLevel 1 has an overflow hidden property that is intended to hideMore than 2 levels out of the section.
2--due to theLevel 1OfUnder the packageLevel 2 overflow hidden part can be controlled byThe scrolltop of Level 1 is scrolled.
2, the position of the scroll bar:
If you're behind the control,The top value of Level 2 scrolls, the scrollbar can be directly relative to theLevel 1 for absolute positioning.
2--If you are through controlThe scrolltop of Level 1 is scrolled, then the scrollbar needs to be added a layer of wrapping outside, the purpose is to let the scroll bar does not followLevel 1 Roll up.
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 scroll bar, here's a little bit of attention,Level 1OfHeight andThe total height of the scroll bar is the same, 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 gettingThe y-axis coordinates of the browser-The y-axis coordinates of the scroll bar being clickedGet
3--the formula that implements the scrollbar drag:
Four elements, 1-the y-axis coordinates of the browser when dragging, 2-The y-axis coordinate of the scroll bar 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--the scroll bar is calculatedThe current vertex value andThe ratio of the vertex movable limit value:
Calculating their proportions is purely to controlLevel 2AndLevel 1。 This is a dynamic ratio of 0-1

2, everything is ready, the rest is controlLevel 2And hierarchy 1:
     1--first get their two-level heights , then calculates hierarchy 2            vertex moveable limit: -  hierarchy 1      2--control   level 1  scrolltop, the scrolling distance is echoed by the scroll bar:
            vertex movable limit value * The ratio of scroll bar scrolling
     3--completed.

Custom scroll bar principle