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的子容器，并隐藏右边距为负的滚动条

See the fiddle

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>

Answer 2

我不知道你的意思是否垂直，但如果你想能够水平滚动但垂直隐藏，请将其更改为：

overflow-y:hidden;

同样如果您想要反过来，请转到：

overflow-x:hidden;

Answer 3

将overflow: hdden替换为overflow-x: hidden;

Answer 4

您正在将包含<div class='s'>的overflow属性设置为隐藏。顾名思义，这将隐藏任何溢出<div>维度的内容。

尝试设置：

.s{
    overflow-y:scroll;
    height:200px;
    border:1px solid red;
}

JS小提琴：http://jsfiddle.net/ccrhpbp5/3/

Answer 5

尝试

.s {
  scrollbar-width: none;
  -ms-overflow-style: none;
   overflow: hidden;
  }

.s::-webkit-scrollbar {
  display: none;
  overflow: hidden;
  }

一个用于Firefox，另一个用于铬

Answer 6

另一种方式可能是：

将overflow:hidden放入容器
document.getElementbyId().scroll = true
然后您可以滚动

溢出：隐藏无法在div

6 个答案: