start words

Regarding the hiding of the scroll bar, here I choose the method used by (layui) to give a detailed explanation, and add a GIF diagram to explain the steps

demo

The first step is to write out the code

(It is recommended to copy directly, hehe)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style type="text/css">

    .box {
      
      
        width: 100%;
    }

    .outer-box {
      
      
        margin: 50px auto;
        width: 300px;
        height: 500px;
        background-color: #00F7DE;

        overflow-x: hidden;
    }

    .scroll-box {
      
      
        width: 330px;
        height: 500px;
        background-color: #959595;
        opacity: .8;

        overflow-x: hidden;
    }

    .content {
      
      
        height: 1000px;
    }


</style>

<body>

<div class="box">
    <div class="outer-box">
        <div class="scroll-box">
            <div class="content">
                <div>aaaaa</div>
                <div>aaaaa</div>
                <div>aaaaa</div>
                <div>aaaaa</div>
                <div>aaaaa</div>
                <div>aaaaa</div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

The second step of dismantling the outer-box

.outer-boxThe style structure in css is as follows

.outer-box {
    
    
        margin: 50px auto; /* 居中，请忽略…… */
        width: 300px; /* 宽 */
        height: 500px; /* 高 */
        background-color: #00F7DE; /* 背景颜色 */

        overflow-x: hidden; /* 隐藏溢出的x轴部分 */
    }

It is this sentence that works overflow-x.
We will overflow-x: hiddencomment it out to see the result
Disassemble the outer-box
. Obviously, the inner overflow is hidden along with the scrollbar.

The third step of dismantling the scroll-box

.scroll-boxThe style structure in css is as follows

.scroll-box {
    
    
        margin: 50px auto; /* 居中，请忽略…… */
        width: 330px; /* 宽(注意一下这里) */
        height: 500px; /* 高 */
        background-color: #00F7DE; /* 背景颜色 */
        opacity: .8 /* 透明度，请忽略…… */

        overflow-x: hidden; /* 隐藏溢出的x轴部分 */
    }

.scroll-boxThere is a sentence in that is .outer-boxdifferent
width: 330px;
from this code means: a container that is 30px wider than the outside is given internally, and the wider 30px represents the width of the scroll bar.

From the picture given in [The second step of dismantling the outer-box],
Dismantling the scroll-box
we can see that the red frame part is an extra 30px
and this part overflow-x: hiddenis hidden.

So here comes the problem!

Why scroll-boxshould it be set overflow-x: hidden?

Let's take a look:

Disassemble scroll-box-1
Why is this so?
I don't know if you guys noticed something different about the scrolling this time

That's right, the background color of is exposed in this scrolling outer-box, so it can only show that this scrolling is scroll-boxscrolling, and what we want is content scrolling.

The content of the fourth step of dismantling

First of all, we change the style to:
disassemble content
for easy observation:
Dismantling conetnt-1
it can be found that the scrolling is content, which is the innermost content.