Implement fully compatible custom scrollbars with the new CSS3 feature.

Background: In recent projects because of the unified page style, the use of a custom scroll bar, before the completion of the scroll bar, the same way as the online scroll bar plug-in implementation of the method, equivalent to build a wheel, through the CSS3

The online scroll bar plug-in is mostly through the monitoring of the content of the scrolling event, due to the original JS scrolling event There are some bugs, so in fact, with jquery mousewheel.js plug-in more, the scroll bar is also referenced by the plugin.

First of all, let's talk about the general steps and methods of customizing the scroll bar implementation :

Background: a needs scrolling.

1. Add a parent s package to A and b for absolute or relative positioning (this is based on the positioning of S to maintain the original layout).

2. In S, generate a sibling node b,b as a container for the scrollbar, and then generate the scrollbar Bar,bar in B with the height of the container s height and a actual height.

3. Listen for the scroll events of S and the top setting for a and bar in the scrolling event (the same as the horizontal scrolling principle), which enables the custom scroll bar to be shifted with the content scrolling.

4. Listen to the drag event of the ScrollBar bar, which listens to the MouseDown and MouseUp events of the bar's parent B, calculates the distance of the mouse displacement when the mouse is pressed, and then modifies the top of a and bar.

The above is the universal custom scroll bar implementation principle, in the 3rd, 4 steps, need to design algorithms to ensure normal operation.

When writing the scroll bar, write to the 4th step to have a new idea: Save the 4th step, scroll or with the browser's own scroll bar, style customization. the benefits of doing this include the following points:

1. Embrace the native, reduce the code, also reduce the calculation process easily caused by the bug.

2. The browser's scroll bar function has been perfected, and the custom scrolling entry is just modifying the style.

3. Do not consider compatibility.

Is the approximate structure: A is the content part, B is the native scroll bar, c is a custom scrollbar, and C blocks B.

Using steps 1, 2, and 3 above, we can implement the visual effect of C when scrolling a, but how to make C and B have the same function, that is, how to let C control a? Or look at the picture

This is achieved, and this idea can be achieved thanks to the new style of CSS3: pointer-events

pointer-events: Auto | none | visiblepainted | Visiblefill | Visiblestroke | Visible | Painted | Fill | Stroke | All

The default value is auto, but other values can only be used on SVG except auto and none.

By setting the Pointer-events:none style to C, C can not respond to various events, and does not prevent bubbling, equivalent to a layer of C in the user's eyes, the user actually manipulates B, that is, the use of the native scroll bar.

I have wrapped the scrollbar in a jquery object, and only need to refer to the method $.lon_creatscroll (a,b,c) and specify the content part and parent container and scroll bar color when using it.

Here is the implementation code for the two container scroll bars.

The source code has more detailed implementation steps and comments, need to access my github

Implement fully compatible custom scrollbars with the new CSS3 feature.