CSS取消网页上的滑动条

网页上滑动条的取消

情景
某些时候因为空间的限制或者样式的排版，我们会需要给盒子设置具体的宽高，然后使其X轴或者Y轴可以滑动
Y轴的滑动：

.box{
   height:300px;
   overflow:hidden;
   overflow-y:scroll;
}

X轴的滑动：
html:

<div class="box">
   <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS:

.box {
   width: 100%;
     height: 1rem;
     overflow: hidden;
     overflow-x: auto;
     white-space: nowrap;
 }
.box>span {
    display: inline-block;
    width: 30%;
    height: 100%;
    background: green;
}
.box>span:nth-child(odd) {
    background: pink;
}

展示：

此时需要出去滑动条的话，使用如下代码：

.box::-webkit-scrollbar{
	width:0;
	height:0
}

万般滋味，都是生活。公众号求关注哦!