码迷,mamicode.com
首页 > 其他好文 > 详细

[转]无法滚动到溢出容器的Flex项的顶部

时间:2020-03-31 10:27:55      阅读:61      评论:0      收藏:0      [点我收藏+]

标签:safe   div   cli   bsp   发表   art   wan   时尚   tail   

原文: http://www.imooc.com/wenda/detail/562829

--------------------------------------------------------------------------------------

无法滚动到溢出容器的Flex项的顶部

Cats萌萌 2019-06-03 10:44:03

所以,在尝试使用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}

这个效果(当前)火狐,Safari,Chrome和Opera。有趣的是,如果你在IE10供应商前缀CSS中发表评论的话,它在IE10中的行为确实是正确的-我还没有费心在IE11中进行测试,但假设它的行为与IE10的行为相匹配。

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

 

技术图片

3 回答

技术图片
慕容森

问题

Flexbox使对中非常容易。

通过简单的应用align-items: centerjustify-content: center对于FLEX容器,您的FLEX项将以垂直和水平为中心。

但是,当FLEX项大于FLEX容器时,此方法存在问题。

正如问题中所指出的,当FLEX项溢出容器时,顶部变得不可访问。

 

对于水平溢出,左侧部分变得不可访问(或右部分,在RTL语言中)。

下面是一个LTR容器的示例justify-content: center还有三件柔韧物品:

 

有关此行为的解释,请参阅此答案的底部。


解决方案1

若要修复此问题,请使用挠曲箱自动边距,而不是justify-content.

带着auto边距,溢出的挠曲项目可以垂直和水平中心,而不会失去对它的任何部分的访问。

因此,与FLEX容器上的代码不同的是:

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

在Flex项上使用以下代码:

.flex-item {
    margin: auto;}

技术图片

订正演示


解决方案2(尚未在大多数浏览器中实现)

添加safe值到关键字对齐规则,如下所示:

justify-content: safe center

align-self: safe center

CSS盒对齐模块规范:

4.4.溢出对齐:safeunsafe关键词与滚动安全限值

当[FLEX项]大于[FLEX容器]时,它将溢出。如果在这种情况下采用某些对齐模式,则可能会导致数据丢失:例如,如果侧边栏的内容居中,则当其溢出时,可能会将部分框发送到视口的起始边缘,无法滚动到。

要控制这种情况,溢流对准模式可以显式指定。Unsafe在溢出情况下,对齐遵守指定的对齐模式,即使它会导致数据丢失,而safe在溢出情况下,对齐方式会更改,以避免数据丢失。

默认行为是将对齐主题包含在可滚动区域内,尽管在编写此安全特性时尚未实现。

safe

如果[FLEX项]的大小溢出了[FLEX容器],则[FLEX项]将像对齐模式一样对齐[FLEX项]。flex-start].

unsafe

无论[FLEXItem]和[FLEX容器]的相对大小如何,给定的对齐值都是受尊重的。

注意:Box对齐模块用于多个盒子布局模型,而不仅仅是FLEX。因此,在上面的规范摘录中,括号中的术语实际上是“对齐主题”、“对齐容器”和“对齐容器”。start“.我用了一些具体的术语来关注这个特定的问题。


MDN对滚动限制的解释:

FLEX项目注意事项

Flexbox的对齐属性做“真”对中,不像CSS中的其他对中方法。这意味着FLEX项目将保持居中状态,即使它们溢出了FLEX容器。

但是,如果它们溢出到页面的顶部边缘或左侧边缘[.],这有时会有问题,因为您不能滚动到该区域,即使那里有内容!

在未来的版本中,将扩展对齐属性,使其具有“安全”选项。

现在,如果这是一个问题,您可以使用边距来实现对中,因为它们将以“安全”的方式响应,并且在溢出时停止对中。

而不是使用align-属性,只要把auto您希望居中的弹性项目的页边距。

而不是justify-属性,在Flex容器中的第一个和最后一个FLEX项的外部边缘放置自动边距。

这个auto边距将“弯曲”,并假定剩余空间,当有剩余空间时,以弹性项为中心,如果没有,则切换到正常对齐。

但是,如果你想替换justify-content以保证金为中心的多行挠曲盒,你可能是运气不好,因为你需要把第一个和最后一个挠性项目的每一行。除非您能够提前预测哪些项将在哪一行上结束,否则您无法可靠地使用位于主轴的基于保证金的中心位置来替换justify-content财产。

[转]无法滚动到溢出容器的Flex项的顶部

标签:safe   div   cli   bsp   发表   art   wan   时尚   tail   

原文地址:https://www.cnblogs.com/oxspirt/p/12603243.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!