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

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

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

只是一个测试，效果很好。

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

工作Fiddle

JavaScript：

由于不同浏览器的滚动条宽度不同，最好使用JavaScript处理。如果执行Element.offsetWidth-Element.clientWidth，将显示精确的滚动条宽度。

JavaScript工作Fiddle

Or

使用位置：绝对，

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

工作Fiddle

JavaScript工作Fiddle

信息：

基于这个答案，我创建了一个简单的滚动插件。

Use

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // Firefox, Chrome
    document.body.scroll = "yes"; // Internet Explorer only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // Internet Explorer only
}

对于您想要加载、卸载或重新加载滚动条的任何点，调用这些函数。当我在Chrome中测试它时，它仍然可以在Chrome中滚动，但我不确定其他浏览器。

隐藏水平和垂直滚动条。

请在此处查看Fiddle

HTML

 <div id="container1">
    <div id="container2">
    <pre>

Select from left and drag to right to scroll this very long sentence. This should not show scroll bar at bottom or on the side. Keep scrolling .......... ............ .......... ........... This Fiddle demonstrates that scrollbar can be hidden. ..... ..... ..... .....
    </pre>

    </div>
    <div>

CSS

* {
    margin: 0;
}
#container1 {
    height: 50px;
    width: 100%;
    overflow: hidden;
    position: relative;
}
#container2 {
    position: absolute;
    top: 0px;
    bottom: -15px;
    left: 0px;
    right: -15px;
    overflow: auto;
}

我碰巧在我的项目中尝试了上述解决方案，由于某些原因，由于div定位，我无法隐藏滚动条。因此，我决定通过引入一个表面覆盖滚动条的div来隐藏滚动条。下面的示例适用于水平滚动条：

<div id="container">
  <div id="content">
     My content that could overflow horizontally
  </div>
  <div id="scroll-cover">
     &nbsp; 
  </div>
</div>

对应的CSS如下：

#container{
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: relative;
}

#content{
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}
#scroll-cover{
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0;
  background-color: #fff; /*change this to match color of page*/
}