The scrollbar used in the project is mainly focused on two aspects. One is the need to set the style of the scrollbar and adapt to the overall UI of the website. The second is to obtain the properties of the scroll bar, the page sliding interaction: such as sliding positioning has sliding loading

Scroll bar style Settings

Webkit-based browser

1. :: -webkit-scrollBar Overall part of the scrollbar, ::- webkit-Scrollbar-thumb 3. ::-webkit-scrollbar-track Track of the scrollbar 4. ::- webkit-Scrollbar-button Buttons at both ends of the scrollbar 5. ::-webkit-scrollbar-track-piece ::-webkit-scrollbar-corner ::-webkit-scrollbar-track-piece 7. ::-webkit-resizer The intersection of the vertical and horizontal scroll bars is used to drag controls that resize elementsCopy the code

Scroll bar composition structure diagram:

Pseudo-classes for scrollbars in webKit browsers

: Horizontal for horizontal scrollbars :vertical for vertical scrollbars: Decrement for decreasing buttons and track debris: Increment for increasing buttons and track debris: Start for buttons and track debris. Indicates whether the object is placed in front of the slider :end applies to buttons and track debris. Indicates whether the object is placed behind the slider :double-button works with buttons and track debris. Determine if orbital debris is next to a pair of buttons :single-button applies to buttons and orbital debris. Determine if the orbital fragment is immediately adjacent to a separate button :no-button indicates that the orbital fragment is not immediately adjacent to the button; corner-present indicates whether the corner of the scroll bar exists; window-inactive indicates the area containing the scroll bar when the focus is not on the windowCopy the code

Of course, you can also use jQuery’s Nanoscroller and Vue’s vue-Happy-Scroll to set the scroll bar style

Sliding event

The drop-down load

1. Get the height of the scope of the current visual document. DocumentElement. ClientHeight | | document. Body. ClientHeight 2. The height of the distance to get the scroll bar at the top of the document. The document. The scrollTop | | $(). Offset (). The top 3. Get the Height of the entire page document. The documentElement. ScrollHeight | | document. The body. The scrollHeight | | $(window). Height (4). Judge the viewable range height + scrollbar height from the top === page height equals to reach the bottomCopy the code

On the fixed

1. The distance from the top of the current element to obtain high $(). The offset (). The top | | document. The getElementById (). The scrollTop 2. 3. Fixed when the height of the current element is less than the height of the scrollbarCopy the code