我加了这个，它对我有用

-ms溢出样式：无；/*IE和Edge*/滚动条宽度：无；/*Firefox浏览器*/

裁判：https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

这将在正文中：

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

更新：

Firefox现在支持使用CSS隐藏滚动条，因此所有主要浏览器（Chrome、Firefox、Internet Explorer、Safari等）都已覆盖。

只需将以下CSS应用于要删除滚动条的元素：

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

这是我目前所知的最简单的跨浏览器解决方案。查看演示。

原始答案：

这是另一种尚未提及的方式。它非常简单，只涉及两个div和CSS。不需要JavaScript或专有CSS，它适用于所有浏览器。它也不需要显式设置容器的宽度，从而使其成为流体。

此方法使用负边距将滚动条移出父级，然后使用相同的填充量将内容推回到其原始位置。该技术适用于垂直、水平和双向滚动。

演示：

竖的水平的两个方向

垂直版本的示例代码：

HTML格式：

<div class="parent">
  <div class="child">
    Your content.
  </div>
</div>

CSS:

.parent {
  width: 400px;
  height: 200px;
  border: 1px solid #AAA;
  overflow: hidden;
}

.child {
  height: 100%;
  margin-right: -50px; /* Maximum width of scrollbar */
  padding-right: 50px; /* Maximum width of scrollbar */
  overflow-y: scroll;
}

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

.div{

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

只需将子对象的宽度设置为100%，将填充设置为15像素，将overflow-x设置为滚动和溢出：为父对象隐藏，并设置您想要的宽度。

它适用于所有主要浏览器，包括Internet Explorer和Edge，但Internet Explorer 8及更低版本除外。

以下Sass样式应使滚动条在大多数浏览器上透明（不支持Firefox）：

.hide-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;

  &::-webkit-scrollbar {
    width: 1px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}