纯css实现隐藏滚动条仍可以滚动

移动端弹出层加了滚动条之后,滚动条一直在,有些不美观,overflow:hidden;虽然可以隐藏滚动条,但是不能滚动。需要实现隐藏滚动条但是仍可以滚动,js实现太麻烦,直接将滚动条隐藏会更好一些。

在div块外面再包一层div,设置宽度小于内层div宽度,加overflow:hidden;

<div class="container">
<div class="content">
    <ul>
        <li>内容内容内容内容内容</li>
        <li>内容内容内容内容内容</li>
        <li>内容内容内容内容内容</li>
    </ul>
</div>
</div>

css

.container{
        width:92%;
        overflow:hidden;
}
.content{
            padding: 0.2rem;
            max-height:314px;
            overflow-y: scroll;
            width:96%;
}                                        

 

posted @ 2017-09-20 19:16  c-137Summer  阅读(1450)  评论(0编辑  收藏  举报