我遇到了这个问题，解决起来非常简单。

取两个容器。内部将是可滚动的容器，外部显然将容纳内部：

#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }

它非常简单，适用于任何浏览器。

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

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

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

隐藏IE、Edge和Firefox的滚动条

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

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

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

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

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

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>

只需编写以下代码：

::-webkit-scrollbar {
  width: 0px;
}

Or

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

这适用于我的跨浏览器。然而，这不会在移动浏览器上隐藏本机滚动条。

在SCSS中

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
  &::-webkit-scrollbar { /** WebKit */
    display: none;
  }
}

在CSS中

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
  display: none;
}