CSS可以用来隐藏滚动条吗?你会怎么做?


当前回答

设置溢出:隐藏;在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>

如果需要,内容将被剪裁以适合填充框。不提供滚动条,也不允许用户滚动(例如通过拖动或使用滚轮)。内容可以通过编程方式滚动(例如,通过设置属性值,如offsetLeft),因此元素仍然是滚动容器。(来源)

其他回答

使用CSS溢出属性:

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

以下是更多示例:

溢出-x,溢出-y测试CSS溢出属性

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

了解更多信息:溢出。

这对我来说适用于简单的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;

我编写了一个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

如果你们还感兴趣的话,我想我为你们找到了一个变通办法。这是我的第一个星期,但这对我很有用。。。

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

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