x0zh/css 显示隐藏滚动条

## css 显示隐藏滚动条
```html
<!DOCTYPE html>
<html>

<head>
    <title>CSS实现隐藏滚动条</title>
    <meta charset="UTF-8">
    <style type="text/css">
    .wrap {
        width: 500px;
        height: 500px;
        margin: 0 auto;
        overflow: hidden;
    }

    .scroll {
        width: 520px;
        height: 500px;
        overflow-y: scroll;
        overflow-x: hidden;
        background-color: #ccc;
    }

    .content {
        width: 500px;
        height: 1000px;
    }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="scroll">
            <div class="content">
                <p>wrap 相当于一个宽高固定的视窗，超出的内容都会被隐藏</p>
                <p>scroll 用来滚动加载超出长度的内容，滚动条所在的位置被 wrap 遮挡住</p>
                <p>content 内容区域的宽度和视窗一样，这样就不会出现内容被遮挡的情况，长度超出的内容能被 scroll 滚动加载出来。这样就实现了隐藏滚动条的效果。</p>
                <p style="margin-top: 800px;text-align: right;">--end</p>
            </div>
        </div>
    </div>
</body>

</html>
```
	```html
	<!DOCTYPE html>
	<html>

	<head>
	<title>CSS实现隐藏滚动条</title>
	<meta charset="UTF-8">
	<style type="text/css">
	.wrap {
	width: 500px;
	height: 500px;
	margin: 0 auto;
	overflow: hidden;
	}

	.scroll {
	width: 520px;
	height: 500px;
	overflow-y: scroll;
	overflow-x: hidden;
	background-color: #ccc;
	}

	.content {
	width: 500px;
	height: 1000px;
	}
	</style>
	</head>

	<body>
	<div class="wrap">
	<div class="scroll">
	<div class="content">
	<p>wrap 相当于一个宽高固定的视窗，超出的内容都会被隐藏</p>
	<p>scroll 用来滚动加载超出长度的内容，滚动条所在的位置被 wrap 遮挡住</p>
	<p>content 内容区域的宽度和视窗一样，这样就不会出现内容被遮挡的情况，长度超出的内容能被 scroll 滚动加载出来。这样就实现了隐藏滚动条的效果。</p>
	<p style="margin-top: 800px;text-align: right;">--end</p>
	</div>
	</div>
	</div>
	</body>

	</html>
	```