Question

我的问题如下：

我有一个div，它有一组按钮，每个按钮都有一个弹出窗口。

<div id="floatingFilter">
  <div class="div-1">
    <button class="popupActivator">Trigger Popup</button>
    <div class="popupContainer"><span>This is my popup.</span></div>
  </div>
</div>

CSS：

#floatingFilter {
  height: 100%;
  width: 200px;
  overflow-y: scroll;
  position: fixed;
  top: 0px;
  right: 0px;
}
.popupContainer {
  position: fixed;
  right: 190px;
  top: 100px;
  width: 100px;
  height: 100px;
}

当我打开一个弹出窗口时，在Safari OSX上，我只能看到popupContainer的前10px。剩下的就是隐藏。

任何人都有这个问题/有解决方案吗？它适用于其余的浏览器。

请参阅plunker

Answer 1

这是因为你设置了position:fixed。这将不允许它滚动。如果您删除了此规则，那么它可以正常工作。

DEMO http://jsfiddle.net/wtTLf/

Safari OSX：overflow-y：scroll强制元素水平隐藏溢出元素

1 个答案: