Question

必须有一些特殊的东西才能使overflow-y: scroll发挥作用，我无法找到它...任何想法？

HTML：

<div>
  <ul>
    <li>
      One
    </li>
    <li>
      One
    </li>
    <li>
      One
    </li>
    <li>
      One
    </li>
    <li>
      One
    </li>
    <li>
      One
    </li>
    <li>
      One
    </li>
  </ul>
</div>

CSS：

div {
  background-color: #FFFFEE;
  width: 200px;
  height: 100px;
  overflow-y: hidden;
}

ul {
  overflow-y:scroll;
}

Answer 1

从div容器元素中删除overflow-y：hidden。

为ul添加显式高度。

div {
  background-color:#FFFFEE;
  width: 200px;
  height: 100px;
  //overflow-y: hidden;
}

ul {
  height: 100px;
  overflow-y:scroll;
}

应该做的伎俩。

Answer 2

更改div overflow-y以滚动并删除ul样式对我有用：

div {
  background-color:#FFFFEE;
  width: 200px;
  height: 100px;
  overflow-y: scroll;
}

/* you don't need this.
ul {
  overflow-y:scroll;
}
*/

编辑：根据OP的评论，只有UL应该滚动。 This回答完成了这一点。我的回答将滚动div的全部内容。

Answer 3

将ul css编辑为：

  ul {
  margin: auto;
  height: 100px;
  overflow-y:scroll;
  }

添加等于父元素的'height'属性，并将'margin'添加到'auto'。

https://jsfiddle.net/7j428j5g/

overflow-y滚动不适用于嵌套在div中的ul

3 个答案: