将滚动条隐藏在HTML页面上

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

查找有关它的更多信息：溢出。

我的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%;
}

我相信您可以使用overflowCSS属性来操作它，但是它们对浏览器的支持有限。一位消息人士称，它是Internet Explorer 5（及更高版本），Firefox 1.5（及更高版本）和Safari 3（及更高版本），也许足以满足您的目的。

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

我只是以为我会指出任何其他人阅读这个问题，即元素overflow: hidden上的设置（或溢出-y）body不会为我隐藏滚动条。

我必须使用html元素。

将此CSS代码复制到客户代码以隐藏滚动条：

<style>

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

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

</style>

我编写了一个WebKit版本，其中包含一些选项，例如自动隐藏，小版本，仅滚动-y或仅-x：

._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

除了彼得的答案：

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

对于Internet Explorer 10，这将相同：

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

如果您正在寻找隐藏移动设备滚动条的解决方案，请遵循Peter的回答！

这是一个jsfiddle，它使用以下解决方案隐藏水平滚动条。

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

它已在装有Android 4.0.4的三星平板电脑（冰淇淋三明治，在本机浏览器和Chrome中）以及在装有iOS 6的iPad（在Safari和Chrome中）进行了测试。

使用CSS overflow属性：

.noscroll {
  width: 150px;
  height: 150px;
  overflow: auto; /* Or hidden, or visible */
}

这里还有更多示例：

• 溢出x，溢出y测试
• CSS溢出属性

这是我的解决方案，理论上涵盖了所有现代浏览器：

html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}

html 可以替换为要隐藏其滚动条的任何元素。

_{注意：我已经浏览了其他19个答案，以查看我发布的代码是否已被涵盖，似乎没有一个答案可以概括出2019年的情况，尽管其中有很多细节都很好。抱歉，如果有人说过这个，我错过了。}

正如其他人已经说过的那样，请使用CSS overflow。

但是，如果您仍然希望用户能够滚动该内容（滚动条不可见），则必须使用JavaScript。

请在这里找到解决方案的我的答案：隐藏滚动条，同时仍然可以使用鼠标/键盘滚动

如果您仍然感兴趣，我想我为您找到了一种解决方法。这是我的第一周，但对我有用。

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

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

这对我有用简单的CSS属性：

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

对于旧版本的Firefox，请使用： overflow: -moz-scrollbars-none;

您可以使用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 width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

overflow: hidden;像这样在body标签上设置：

<style type="text/css">
    body {
        overflow: hidden;
    }
</style>

上面的代码同时隐藏了水平和垂直滚动条。

如果只想隐藏垂直滚动条，请使用overflow-y：

<style type="text/css">
    body {
        overflow-y: hidden;
    }
</style>

如果只想隐藏水平滚动条，请使用overflow-x：

<style type="text/css">
    body {
        overflow-x: hidden;
    }
</style>

---

注意：它还将禁用滚动功能。如果您只想隐藏滚动条而不是滚动功能，请参考以下答案。