html – 无法滚动到溢出容器的flex项目的顶部

所以,在尝试使用flexbox有用的模式,我发现似乎是一个浏览器问题,我想知道是否有一个已知的修复或解决方法 – 或如何解决它的想法。

我想解决的事情,有两个方面。首先,让模态窗口垂直居中,这是按预期工作。第二个是获取模态窗口滚动 – 外部,所以整个模态窗口滚动,而不是其中的内容(这是所以你可以有下拉菜单和其他UI元素,可以扩展到模态的边界外 – 像自定义日期选择器等)

然而,当结合垂直居中和滚动条时,模态的顶部可能变得不可访问,因为它开始溢出。在上面的例子中,你可以调整大小来强制溢出,这样做,它允许你滚动到模态的底部,但不是到顶部(第一段被切断)。

这里是示例代码的链接(高度简化)

https://jsfiddle.net/dh9k18k0/2/

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow-x: auto;
}
.modal-container .modal-window {
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // Optional support to confirm scroll behavior makes sense in IE10
  //-ms-flex-direction: column;
  //-ms-flex-align: center;
  //-ms-flex-pack: center;
  height: 100%;
}
.modal-container .modal-window .modal-content {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  width: 100%;
  max-width: 500px;
  padding: 10px
}

这个效果(当前)Firefox,Safari,Chrome和Opera ..它在IE10有趣的行为正确在IE10如果你评论IE10 vender前缀css – 我没有打扰IE11测试,但假设行为匹配IE10 。

任何想法都会好的。链接到已知问题,或这种行为背后的推理也将是有用的。

Flexbox使对中很容易。

通过简单地应用align-items:center和justify-content:center到flex容器,你的flex项目将垂直和水平居中。

但是,当flex项大于flex容器时,此方法有一个问题。如问题所述,当flex项溢出容器时,顶部变得不可访问。

enter image description here

对于水平溢出,左部分变得不可访问(或在RTL写入模式中的右部分)。这里有一个容器具有justify-content:center和三个flex项的示例:

enter image description here

这里是修复:flexbox auto margins

使用自动边距,溢出的弹性项目可以垂直和水平居中,而不会失去对其任何部分的访问。

而不是flex容器上的这个代码:

#flex-container {
    align-items: center;
    justify-content: center;
}

在flex项目上使用此代码:

.flex-item {
    margin: auto;
}

enter image description here

Revised Demo

参见Box#56 here:Methods for Aligning Flex Items

MDN中滚动限制的说明:

07006

Flexbox’s alignment properties do “true” centering, unlike other
centering methods in CSS. This means that the flex items will stay
centered, even if they overflow the flex container.

This can sometimes be problematic, however, if they overflow past the
top edge of the page, or the left edge […], as
you can’t scroll to that area, even if there is content there!

In a future release, the alignment properties will be extended to have
a “safe” option as well.

For now, if this is a concern, you can instead use margins to achieve
centering, as they’ll respond in a “safe” way and stop centering if
they overflow.

Instead of using the align- properties, just put auto margins on
the flex items you wish to center.

Instead of the justify- properties, put auto margins on the outside
edges of the first and last flex items in the flex container.

The auto margins will “flex” and assume the leftover space,
centering the flex items when there is leftover space, and switching
to normal alignment when not.

However, if you’re trying to replace justify-content with
margin-based centering in a multi-line flexbox, you’re probably out of
luck, as you need to put the margins on the first and last flex item
on each line. Unless you can predict ahead of time which items will
end up on which line, you can’t reliably use margin-based centering in
the main axis to replace the justify-content property.

http://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:html – 无法滚动到溢出容器的flex项目的顶部