[CSS] how to hide scrollbar without losing scrolling function (two lines of code)

There are many answers to the hidden scroll bar on the Internet, but I found that most of them are CV Dafa
That’s what happened to me today

Recently, react encapsulated a table component by itself. Due to the lack of style, the tableheader and tablebody are not aligned
Obsessive compulsive disorder – want to get rid of this scroll-y without losing its original rolling function
<hr/>

Solutions:

1: Scroll bar width is fixed (generally I set scroll bar width directly, jump link:https://www.cnblogs.com/yclblog/p/6806496.html
)
2. To hide the parent element settings of the scroll barOverflow hiding
3. Set the width of the element with scroll barSelf width + scroll bar width

<hr/>

Pseudo code:

.box{
    overflow:hidden;
    }
    
.hidden-scroll{
    width:calc (100% + 17px); / * here I set the fixed scroll bar width of 17px*/
    }

<hr/>

If there is a big guy to see, hope to give more advice
OVER…