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

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

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

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

这是一个类似于divitis的解决方案，所有浏览器都可以使用它。。。

标记如下所示，需要位于具有相对定位的内部（其宽度应设置为400像素）：

<div class="hide-scrollbar">
    <div class="scrollbar">
        <div class="scrollbar-inner">

        </div>
    </div>
</div>

CSS：

.hide-scrollbar {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.scrollbar {
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    right: -50px;
    bottom: 0;
}

.scrollbar-inner {
    width: 400px;
}

我只是想分享一个组合片段，用于隐藏开发时使用的滚动条。这是一组在互联网上找到的对我有用的片段：

.container {
    overflow-x: scroll; /* For horiz. scroll, otherwise overflow-y: scroll; */

    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
}


.container::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}

此外，所有浏览器都可以在没有滚动条的情况下滚动。

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>

更新：

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