您可以使用隐藏溢出的包装器div，并将内部div设置为auto来实现这一点。

要删除内部div的滚动条，可以通过对内部div应用负边距将其从外部div的视口中拉出。然后对内部div使用相等的填充，以使内容保持在视图中。

JSFiddle公司

###HTML格式

<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

###CSS格式

.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;

    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;

    /* Pick an arbitrary margin/padding that should be bigger
     * than the max scrollbar width across the devices that 
     * you are supporting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

这对我来说适用于简单的CSS财产：

.container {
    -ms-overflow-style: none;  // Internet Explorer 10+
    scrollbar-width: none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

对于旧版本的Firefox，请使用：overflow:-moz滚动条none；

我只是想告诉其他读到这个问题的人，在body元素上设置overflow：hidden（或overflow-y）并没有为我隐藏滚动条。

我不得不使用html元素。

我相信您可以使用溢出CSS属性来操作它，但他们的浏览器支持有限。一位消息人士表示，它是Internet Explorer 5（及更高版本）、Firefox 1.5（及更新版本）和Safari 3（及更晚版本）——也许足以满足您的需求。

滚动，滚动，滚动有很好的讨论。

即使溢出，我的答案也会滚动：隐藏；，使用jQuery：

例如，使用鼠标滚轮水平滚动：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
    $(function() {

       $("YourSelector").mousewheel(function(event, delta) {

          this.scrollLeft -= (delta * 30);
          event.preventDefault();
       });
    });
</script>

我的HTML是这样的：

<div class="container">
  <div class="content">
  </div>
</div>

将其添加到要隐藏滚动条的div中：

.content {
  position: absolute;
  right: -100px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 75%; /* This can be any value of your choice */
}

并将其添加到容器中

.container {
  overflow-x: hidden;
  max-height: 100%;
  max-width: 100%;
}