.your-overflow-scroll-class::-webkit-scrollbar {
  ...
  width: 0.5rem; //only hide the vertical scrollbar
  height: 0px; //only hide the horizontal scrollbar
}

这将在正文中：

<div id="maincontainer" >
    <div id="child">this is the 1st step</div>
    <div id="child">this is the 2nd step</div>
    <div id="child">this is the 3rd step</div>
</div>

这是CSS：

#maincontainer
{
    background: grey;
    width: 101%;
    height: 101%;
    overflow: auto;
    position: fixed;
}

#child
{
    background: white;
    height: 500px;
}

要隐藏内容溢出的元素的滚动条，请使用。

.div{

  scrollbar-width: none; /* The most elegant way for Firefox */
}

在WebKit中使用可选样式很简单：

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

您可以使用下面的代码隐藏滚动条，但仍可以滚动：

.element::-webkit-scrollbar { 
    width: 0 !important 
}

截至2018年12月11日（Firefox 64及以上版本），这个问题的答案非常简单，因为Firefox 64+现在实现了CSS滚动条样式规范。

只需使用以下CSS：

scrollbar-width: none;

Firefox 64发布说明链接在此。