背景
我们需要实现这样的功能，在隐藏滚动条的时候，还需要保留滚动的功能，那么我们应该如何操作呢？
做法
- 法一：
①使用伪类隐藏滚动条（仅限Chrome与Safari）
②scrollbar-width: none;（仅限firefox）
③-ms-overflow-style: none;（仅限IE 10+）
/* 隐藏滚动条 */.element { width: 100%; height: 72px; box-sizing: border-box; padding-top: 16px; overflow-x: scroll; /* 设置溢出滚动 */white-space: nowrap; overflow-y: hidden; /* 隐藏滚动条 */scrollbar-width: none; /* firefox */-ms-overflow-style: none; /* IE 10+ */} .element::-webkit-scrollbar { display: none; /* Chrome Safari */}
- 法二：
可滚动的容器外层再签套一个父盒子，父盒子设置overflow:hidde，再配合position，变相隐藏滚动条
<divclass="outer-container"><divclass="inner-container"></div></div>
.outer-container { position: relative; overflow: hidden; } .inner-container { position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll; } /* for Chrome */.inner-container::-webkit-scrollbar { display: none; }
