隐藏HTML页面上的滚动条

除了彼得的回答：

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

这对于Internet Explorer 10也将起同样的作用：

 #element {
      -ms-overflow-style: none;
 }

跨浏览器隐藏滚动条的方法。

在Edge、Chrome、Firefox和Safari上进行了测试。

隐藏滚动条，同时仍然可以使用鼠标滚轮滚动！

Codepen

/* Make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* Make the child visible */
#child {
    visibility: visible;
}

我必须使用 html 元素。

• 一个外部元素来遮盖滚动条。
• 一个中间元素来拥有滚动条。
• 一个内容元素来设置中间元素的大小并使其具有滚动条。

我最大的担忧是所有浏览器版本是否都会设置滚动条以显示溢出的内容。我已经在当前浏览器中进行了测试，但没有在旧版浏览器中测试过。

请原谅我的SASS ;P

%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // push scrollbars behind mask
    @extend %size;
}

测试

OS X 版本为 10.6.8。Windows 版本为 Windows 7。

• Firefox 32.0 滚动条隐藏。点击聚焦后，箭头键不会滚动，但鼠标滚轮和触控板可以。适用于 OS X 和 Windows。
• Chrome 37.0 滚动条隐藏。点击聚焦后，箭头键可以工作。鼠标滚轮和触控板也可以。适用于 OS X 和 Windows。
• Internet Explorer 11 滚动条隐藏。点击聚焦后，箭头键可以工作。鼠标滚轮可以工作。适用于 Windows。
• Safari 5.1.10 滚动条隐藏。点击聚焦后，箭头键可以工作。鼠标滚轮和触控板也可以。适用于 OS X。
• Android 4.4.4 和 4.1.2。 滚动条隐藏。触摸滚动可以工作。尝试在 Chrome 37.0、Firefox 32.0 和 4.4.4 上使用 HTMLViewer（不知道是什么）。在 HTMLViewer 中，页面大小与遮罩内容相同，也可以滚动！滚动与页面缩放的交互效果可接受。

<style>

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

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

</style>

这是一个段落。

<div class="container">
  <div class="content">
  </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%;
}

我编写了一个带有一些选项的WebKit版本，如自动隐藏，小版本，只滚动垂直方向或水平方向:

._scrollable{
    @size: 15px;
    @little_version_ratio: 2;
    @scrollbar-bg-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color-hover: rgba(0,0,0,0.3);
    @scrollbar-coner-color: rgba(0,0,0,0);

    overflow-y: scroll;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;

    &::-webkit-scrollbar {
        background: none;
        width: @size;
        height: @size;
    }

    &::-webkit-scrollbar-track {
        background-color:@scrollbar-bg-color;
        border-radius: @size;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: @size;
        background-color:@scrollbar-handler-color;
        &:hover{
            background-color:@scrollbar-handler-color-hover;
        }
    }

    &::-webkit-scrollbar-corner {
      background-color: @scrollbar-coner-color;
    }

    &.little{
        &::-webkit-scrollbar {
            background: none;
            width: @size / @little_version_ratio;
            height: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-track {
            border-radius: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: @size / @little_version_ratio;
        }
    }

    &.autoHideScrollbar{
        overflow-x: hidden;
        overflow-y: hidden;
        &:hover{
            overflow-y: scroll;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
            &.only-y{
                overflow-y: scroll !important;
                overflow-x: hidden !important;
            }

            &.only-x{
                overflow-x: scroll !important;
                overflow-y: hidden !important;
            }
        }
    }

    &.only-y:not(.autoHideScrollbar){
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    &.only-x:not(.autoHideScrollbar){
        overflow-x: scroll !important;
        overflow-y: hidden !important;
    }
}

http://codepen.io/hicTech/pen/KmKrjb

即使使用overflow:hidden;，我的答案也会滚动，使用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>

为了禁用垂直滚动条，只需添加overflow-y:hidden;。

了解更多信息：overflow。