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

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

另一个简单的工作小提琴：

#maincontainer {
    background: orange;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

#childcontainer {
    background: yellow;
    position: relative;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 20px;
    overflow: auto;
}

父容器上隐藏溢出，子容器上自动溢出。易于理解的

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

.keep-scrolling {
  background-color: #EEE;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow-y: scroll; /* Add the ability to scroll the y axis */
}

/* Hide the scrollbar for Chrome, Safari and Opera */
.keep-scrolling::-webkit-scrollbar {
  display: none;
}

/* Hide the scrollbar for Internet Explorer, Edge and Firefox */
.keep-scrolling {
  -ms-overflow-style: none;  /* Internet Explorer and Edge */
  scrollbar-width: none;  /* Firefox */
}

SCSS

.keep-scrolling {
    background-color: #EEE;
    width: 200px;
    height: 100px;
    border: 1px dotted black;
    overflow-y: scroll; /* Add the ability to scroll the y axis */

    /* Hide the scrollbar for Internet Explorer, Edge and Firefox */
    -ms-overflow-style: none;  /* Internet Explorer and Edge */
    scrollbar-width: none;  /* Firefox */

    /* Hide the scrollbar for Chrome, Safari and Opera */
    &::-webkit-scrollbar {
       display: none;
    }
}

HTML

<div class="keep-scrolling">
</div>

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

只需使用以下CSS：

scrollbar-width: none;

Firefox 64发布说明链接在此。

这个答案不包括代码，所以下面是第页的解决方案：

根据页面的说法，这种方法不需要提前知道滚动条的宽度就可以工作，而且解决方案也适用于所有浏览器，可以在这里看到。

好的是，您不必使用填充或宽度差异来隐藏滚动条。

这也是缩放安全的。填充/宽度解决方案在缩放到最小值时显示滚动条。

Firefox修复程序：http://jsbin.com/mugiqoveko/1/edit?output

要素.外部容器{宽度：200px；高度：200px；}.外部容器{边框：5px纯紫色；位置：相对；溢出：隐藏；}.内部容器{位置：绝对；左：0；overflow-x：隐藏；overflow-y：滚动；右填充：150px；}.内部容器：：-webkit滚动条{显示：无；}<div class=“outer container”><div class=“内部容器”><div class=“element”>Lorem ipsum dolor坐amet，consectetur adipiscing elit。整数车辆quam nibh，eu tristique tellus dignissim quis。整体调味品ultrices elit ut mattis。Praesent rhoncus tortor metus，nec pellentesque enim mattis nec。Nulla vitae turpis utdui consectetur pellentesque quis vel est。Curabitur rutrum，mauris ut mollis lobortis，sem est congue lectus，ut sodales nunc leo a libero。克雷斯·萨皮恩（Cras quis sapien）在米弗利利亚·坦普斯（mi frigilla tempus）调味品奎斯·韦利特（quis velit）中。Aliquam和Aliquam arcu。Morbi三体阿利奎姆·鲁特鲁姆（aliquam rutrum）。杜伊斯·廷西杜特（Duis tincidunt）、兽人（orci suscipit cursus interstie）、普鲁斯·尼西·法雷特拉（purus nisi phareta dui）、米的迪格尼斯·菲利斯·图比斯（tempor dignissim felis turpis）。Vestibulum turpis neque，调味品，调戏维尔·茹斯托。不要骚扰我，不要骚扰我。还有一个巨大的sem。Quisque id magna ultrices，lobortis dui eget，pretium libero。在未成年人之前，库拉比特人（Curabitur aliquam）。</div></div></div>