CSS隐藏滚动条的方法

方法一：

纯CSS+div样式隐藏。

在需要滚动的元素外面再套一个div，给最外面的div设置样式overflow:hidden，宽度比需要滚动的元素小；

之后给需要滚动的元素设置样式overflow-x:hidden; overflow-y:scroll；

<style type="text/css">
*{margin:0;padding:0;}
.box{
    width: 100px;
    height: 300px;
    overflow:hidden;
    border:1px solid #000;
    margin:50px auto;
}
ul {
    height: 100%;
    width: 120px;
    overflow-x: hidden;
    overflow-y: scroll;
} 

ul li{
    list-style: none;
    width: 100px;
    height:60px;
    line-height: 60px;
    text-align: center;
    border:1px solid #ccc;
    margin-top: -1px;
}

</style>

<div class="box">
    <ul>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
    </ul>

</div>

 

效果 ：        前                                            后

方法二

给需要滚动的元素添加伪选择器，::-webkit-scrollbar{width:0;}，

将宽度设为0，滚动条就会隐藏。

 

PS：

可以设置滚动条样式，使其美观。

 

/*滚动条宽 长,滚动条整体部分，其中的属性有width,height,background,border等。*/

::-webkit-scrollbar{

         width: 7px;

    }

/*滚动条的滑轨背景颜色,可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。*/

    ::-webkit-scrollbar-track{

        background-color: #f5f5f5;

          -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.1);

       border-radius:5px;

}

/* 滑块颜色 */

    ::-webkit-scrollbar-thumb{

        background-color: rgba(0, 0, 0, 0.2);

        border-radius: 5px;

    }

/*滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。*/

    ::-webkit-scrollbar-button{

        background-color: #eee;

        display: none;

   }

/* 横向滚动条和纵向滚动条相交处尖角的颜色 */

    ::-webkit-scrollbar-corner{

        background-color: black;

    }

效果：