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


当前回答

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

这里有一个jsfiddle,它使用下面的解决方案隐藏水平滚动条。

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

它在搭载Android 4.0.4的三星平板电脑(冰淇淋三明治,在本机浏览器和Chrome浏览器中)和搭载iOS 6的iPad(在Safari和Chrome浏览器)上进行了测试。

其他回答

使用CSS溢出属性:

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

以下是更多示例:

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

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

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

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

将此CSS代码复制到隐藏滚动条的客户代码:

<style>

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

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

</style>

您可以使用隐藏溢出的包装器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;
}

即使溢出,我的答案也会滚动:隐藏;,使用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>