溢出:隐藏无法在div中滚动

Question

当我设置溢出时,我不能在div中滚动垂直:隐藏到它.我不明白为什么.

HTML:

<div class="s">
<p>lorem ispum<br/></p>
<p>lorem ispum<br/></p>
<p>lorem ispum<br/></p>
<p>lorem ispum<br/></p>
<p>lorem ispum<br/></p>
<p>lorem ispum<br/></p>
<p>lorem ispum<br/></p>
<p>lorem ispum<br/></p>
 </div>

CSS:

 .s{
        overflow:hidden;
        height:200px;
        border:1px solid red;
    }
    body{
        height:100%;
    }

我做了一个测试JsFiddle来显示错误.

的jsfiddle

更新:

我需要隐藏滚动条,但如果它被隐藏我无法滚动.

Answer 1

如果要隐藏滚动条但希望让它滚动,可以使用overflow:hidden;带有子容器的容器overflow-y:scroll,并隐藏具有负右边距的滚动条.

看小提琴

CSS:

.cont{
    position:relative;
    overflow:hidden;
    height:200px;
    width:100%;
    border:1px solid red;
}
.s{
    overflow-y:scroll;
    height:200px;
    width:100%;
    position:absolute;
    right:-30px;
}

HTML:

<div class="cont">
    <div class="s">
        <p>Content</p>
    </div>
</div>