CSS implementation No (hidden) scroll bar page

Implementation function: Hide browser scroll bar, and do not affect the mouse wheel scrolling page
Applicable: With large picture as background or product introduction page (It should work better if it works with Parallax scrolling .）
Required technology: Very simple CSS and JS

First look at the contrast effect (fig. 1 = Figure 2, both of which can scroll through the mouse wheel for content)


(Fig. 1)


(Fig. 2)

You can see clearly that the body width of Figure 2 is significantly smaller than the width of Figure 1 and has a right offset.
This is the basic principle of no scroll bar page: Moves (sets) the offset of the body (margin/padding),causes the body's scrollbar to appear outside the range of the parent nodeTo achieve the effect of no scroll bar

Code implementation
An HTML node can be divided into 3 levels:

Window
| -Container
| -Text
Such as


And then, with a simple CSS setting, you can achieve no scroll bar effect.
Window needs to be set:Overflow:hidden

Container needs to be set:overflow-y:scroll, height (fixed height), margin (Padding/relateiv+left also line)


If the width of the body is the same as the width of the browser, you need to calculate the width of the browser in real time by JS and set
width of the container = browser width + 20px (width of the general browser scroll bar)
(Of course, there are some CSS details, need to adjust according to the specific situation)

TIP: After you hide the scrollbar in this way, the Onscroll event cannot be set on the window, but is set on the container

CSS implementation No (hidden) scroll bar page