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

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

这对我有用

div {
  -ms-overflow-style: none; /* Edge, Internet Explorer */
  scrollbar-width: none; /* Firefox */
  overflow-y: scroll;
}

// hides scrollbars while allowing to scroll
div::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

这将在正文中：

<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;
}

Use:

<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

这是一个技巧，可以将滚动条与没有滚动条的重叠div稍微重叠：

::-webkit-scrollbar {
    display: none;
}

这仅适用于WebKit浏览器。。。或者您可以使用浏览器特定的CSS内容（如果将来有）。每个浏览器可以为其各自的栏设置不同的特定属性。

对于Microsoft Edge，使用：-ms溢出样式：-ms自动隐藏滚动条；或-ms溢出样式：无；根据MSDN。

Firefox没有同等的功能。尽管有一个jQuery插件来实现这一点，http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

只需将其添加到CSS文件中：

"&::-webkit-scrollbar": {
  display: "none",
  width: 0
},
"-ms-oveflow-style": "none" /* Internet Explorer and Edge */,
"scrollbar-width": "none" /* Firefox */,

使用此选项可以隐藏滚动条，但保留功能：

.example::-webkit-scrollbar {
  display: none;
}

隐藏IE、Edge和Firefox的滚动条

.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}