css隐藏滚动条

css如何隐藏div区域的超出滚动条，但仍保持滚动功能呢？这里给出我的方法：

这里是div滚动区域html代码，scroll-box是产出自动滚动区域，如下：

<div class="scroll-box">
     <div class="scroll-item">滚动单元内容</div>
</div>

这里是滚动区域css代码，包括隐藏滚动条：

.scroll-box {
  width: 690rpx;
  display: flex;
  overflow-x: scroll; /* 这里是允许盒子内容横向（x轴方法）超出滚动 */
  overflow-y: hidden; /* 这里是隐藏竖向（y轴方法）超出内容滚动 */
  scrollbar-width: none; /* Firefox 兼容*/
  -ms-overflow-style: none; /* IE 10+ 兼容*/
}
::-webkit-scrollbar {
  display: none; /* Chrome Safari 兼容*/
}

至此就完成了隐藏滚动条，但仍保持滚动的功能。

重点隐藏滚动条的代码这里单独提出来：

{
overflow-x: scroll;  /* 这里是允许盒子内容横向（x轴方法）超出滚动 */
overflow-y: hidden; /* 这里是隐藏竖向（y轴方法）超出内容滚动 */
scrollbar-width: none; /* Firefox 兼容*/
-ms-overflow-style: none; /* IE 10+ 兼容*/ 
}

::-webkit-scrollbar  {
     display: none; /* Chrome Safari 兼容*/
}