CSS overflow-y:visible, overflow-x:scroll

Question

我在搜索中看到了一些类似于这样的问题，但要么问题没有得到恰当的回答，要么根本没有得到回答。因此，我将再次提问。

<style>
.parent { overflow-y:scroll; overflow-x:visible; width:100px; }
.child { position:relative; }
.child-menu { position:absolute; top:0px; left:-100px; display:inline-block; }
</style>

  <div class="parent">
  <!-- Lots of the following divs -->
  <div class="child">
    Text Line
    <div class="child-menu">some pop out stuff</div>
  </div>
</div>

好的，那只是一个例子。但基本上，我想要实现的是让 .child 类可以在y轴上滚动...上下滚动。但我希望x轴...子菜单在 .parent 容器之外可见。

有意义吗？发生的情况是，当页面呈现时，浏览器将整个溢出解释为自动，并且不尊重分离的轴。我做错了什么，还是浏览器在CSS3规范上还没有跟上呢？主要只在Chrome上测试过。

- Senica Gonzalez

Answer 1

我明白了！

父元素应该是overflow:auto; 子元素应该是position:relative; .child-menu应该是position:fixed;而且没有top或left定位。 如果你这么做，它将使其与内容保持一致。

如果您需要移动child-menu，请使用margin而不是top或left。例如：margin-left:-100px;

编辑

由于似乎仍然有人在使用此方法，请注意，您将需要使用JavaScript来移动固定的项随页面滚动。

- Senica Gonzalez

---

这个在滚动时不起作用吗？在我看来，滚动会滚动 .child，但不会滚动 .child-menu。如果是这样的话，那么这似乎不是一个合理的解决方案。 - dchapman

你知道的，我记不起来了。我想你是正确的。我使用它的次数是为单页面应用程序而设计的，所以那并不是问题。合理吗？没有其他答案，所以对于那些需要这个功能的人来说，是非常合理的。你可以随时在滚动时移动 div。 - Senica Gonzalez

如果有人在将来看到这个答案，我想让你知道的是，这种方法不会使弹出窗口随着侧边栏的滚动而滚动。因此，如果你使用这种方法，你需要使用JS来跟踪滚动。 - Andrew

Answer 2

问题已经解决！他们使用了CSS和JS。

.child:hover .child-menu { display: block; }

 .parent { overflow-y:auto; overflow-x:hidden; width:100px; height:150px  }
    .child { position:static; }
    .child-menu { position:absolute; display:inline-block; display: none; }

https://css-tricks.com/popping-hidden-overflow/

https://jsfiddle.net/68fBE/2/

- blondo

---

我认为这并没有真正解决问题。它只能工作是因为.parent是页面的完整宽度。弹出窗口不会超出父容器的边界，而是父容器会自动增长以适应弹出窗口。 - Matt Korostoff

Answer 3

.parent { 
   overflow-y: auto; 
   width: 100px; 
}

.child-menu {
   display: block;
   position: fixed;
   top: auto;
   left: auto;
}

- rajatkn

---

请避免只给出代码的回答。试着解释一下你的代码如何/为什么解决了OP发布的问题。这将有助于未来的访问者。 - Pratik Bhavsar