当overflow-x被隐藏时，overflow-y无法工作？

Question

当overflow-x被隐藏时，overflow-y无法工作？

9

我有一个包含几个其他div的DIV。我需要div能够垂直地从父级中突出，但不能水平地突出。

我认为使用overflow-x和overflow-y可以解决这个小问题，但我只能让x和y其中一个显示，或者让它们都隐藏。

我的CSS和HTML：

.game {
  position:absolute;
  width:400px; height:300px;
  top:100px; left:100px;
  background-color:#cccccc;

  overflow-x:hidden;
  overflow-y:visible;
}

.block1 {
  position:absolute;
  width:100px; height:100px;
  top:-50px; left:150px;
  background-color:#ffcccc;
}

.block2 {
  position:absolute;
  width:100px; height:100px;
  top:150px; left:-50px;
  background-color:#ccffcc;
}

<div class="game">
  <div class="block1"></div>
  <div class="block2"></div>
</div>

查看这个JSFiddle：尽管overflow-y设置为visible，但两个子div都被截断。

- Kokodoko

2

请参考以下链接：https://dev59.com/NWw15IYBdhLWcg3wv-VM - Pete

2

谢谢。可悲的是，如果其中一个被隐藏，似乎无法组合overflow-x和overflow-y。（我不明白为什么可以指定x和y，如果它们不能彼此不同...）对于我的情况，我也不确定如何解决这个问题。 - Kokodoko

2

我同意这对我来说也没有意义，你不能将一个设置为“隐藏”，另一个设置为“可见”，并使其按预期工作。 - ScottS

2个回答

-1

尝试将你的游戏类更改为：

.game {
     width:400px; height:300px;
    top:100px; left:100px;
    background-color:#cccccc;
    overflow-x:hidden;
    overflow-y:auto;
}

谢谢，Dhiraj

- powercoder23

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ScottS · Accepted Answer

需要结构性改变

如果它有效，这将得到您想要的结果（否则我不知道html / css 的更改是否会影响游戏的其他方面）。通过将“游戏”层次化，使其垂直方向填满整个屏幕，然后使用子 div 设置“窗口”（灰色区域），可以解决此问题。这允许水平上使用 overflow: hidden ，但在垂直方向上不使用。

查看演示。

HTML

<div class="game">
    <div>
    <div class="block1"></div>
    <div class="block2"></div>
    </div>
</div>

CSS（层叠样式表）

html, body { height: 100%; margin: 0;}
.game {
    position:absolute;
    width:400px; 
    height:100%;
    top: 0; 
    left:100px;
    overflow:hidden;
}
.game > div {
    position: absolute;
    top: 100px;
    height: 300px;
    width: 100%;
    background-color:#cccccc;
}

.block1 {
    position:absolute;
    width:100px; height:100px;
    top:-50px; left:150px;
    background-color:#ffcccc;
}

.block2 {
    position:absolute;
    width:100px; height:100px;
    top:150px; left:-50px;
    background-color:#ccffcc;
}