当前位置: 首页 > 面试题库 >

无法滚动到容器溢出的弹性项目的顶部

蒋寒
2023-03-14
问题内容

因此,在尝试使用flexbox创建有用的模式时,我发现了似乎是浏览器的问题,并且想知道是否存在已知的修复程序或解决方法-或有关解决方法的想法。

我要解决的问题有两个方面。首先,使模态窗口垂直居中,这可以按预期工作。第二个是使模式窗口滚动-从外部滚动,因此整个模式窗口滚动,而不是其中的内容滚动(这样您就可以使用下拉菜单和其他可以扩展到模式范围之外的UI元素-例如自定义日期选择器等)

但是,将垂直居中与滚动条结合使用时,模态的顶部会因为开始溢出而变得不可访问。在上面的示例中,您可以调整大小以强制溢出,这样做可以使您滚动到模式的底部,但不能滚动到顶部(第一段被切除)。

.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开头的CSS中注释的话,它确实会在IE10中正确地运行-我还没有在IE11中进行测试,但是假设其行为与IE10相匹配。 。

任何想法都很好。链接到已知问题或此行为背后的原因也将很有用。


问题答案:

问题
Flexbox使居中非常容易。

通过简单的应用align-items: center,并justify-content: center以柔性容器,你的Flex项目(S)将垂直和水平居中。

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

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

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

这是一个LTR容器包含justify-content: center三个flex项目的示例:

解决方案1

要解决此问题,请使用flexbox自动边距,而不是justify-content。

使用auto边距,可以将溢出的flex项目垂直和水平居中,而不会丢失对其任何部分的访问权限。

因此,而不是在flex容器上使用以下代码:

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

在flex项目上使用以下代码:

.flex-item {
    margin: auto;
}

修改后的演示

解决方案2(大多数浏览器尚未实现)
将safe值添加到关键字对齐规则,如下所示:

justify-content: safe center

要么

align-self: safe center

4.4。溢出对齐:safe和和unsafe关键字以及滚动安全限制

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

为了控制这种情况,可以明确指定溢出对齐方式。Unsafe对齐会在溢出情况下遵循指定的对齐方式,即使这会导致数据丢失,而safe对齐会在溢出情况下更改对齐方式,从而避免数据丢失。

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

safe

如果[flex item]的大小溢出[flex container],则将[flex item]对齐,就好像对齐方式是[ flex-start]。

unsafe

无论[flex item]和[flex container]的相对大小如何,都应遵守给定的对齐值。

注意:“框对齐模块”可用于多个框布局模型,而不仅仅是flex。因此,在上面的摘录中,方括号中的术语实际上是“对齐主题”,“对齐容器”和“ start”。我使用了特定于flex的术语来保持对这个特定问题的关注。

MDN的滚动限制说明:

与CSS中的其他居中方法不同,Flexbox的对齐属性进行“真正”居中。这意味着即使弹性项目溢出弹性容器,弹性项目也将保持居中。

但是,如果它们溢出页面的顶部边缘或左​​侧边缘,有时可能会出现问题,因为即使其中有内容,您也无法滚动到该区域!

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

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

无需使用align-属性,只需将auto边距放在要居中的弹性项目上。

代替justify-属性,将自动页边距放在flex容器中第一个和最后一个flex项的外边缘上。

auto利润率将“灵活”,并承担剩余的空间,围绕柔性物品时,有剩余的空间,并切换到正常的排列时,没有。

但是,如果您要替换justify-content多行flexbox中基于边距的居中,则可能不走运,因为您需要在每行的第一个和最后一个flex项目上放置边距。除非您可以提前预测哪些项目将在哪一行结束,否则您将无法可靠地在主轴中使用基于边距的居中中心来替换justify-content属性。



 类似资料:
  • 以下是我用来实现上述布局的代码: 我省略了用于样式设置的代码。你可以在钢笔里看到所有的东西。 上述方法有效,但当区域的内容溢出时,会使整个页面滚动。我只希望内容区域本身滚动,因此我将添加到div。 现在的问题是,柱本身并没有超出其父高度,因此边界也在那里被切断。 这是显示滚动问题的笔。 如何将区域设置为独立滚动,同时使其子项延伸到框的高度之外?

  • 问题是当我将页面收缩到某个点时, 元素的顶部溢出,奇怪的是底部没有溢出。说清楚一点,我不想让这两个都溢出来。 这里有一个指向它的JSFiddle链接:https://jsfidle.net/maep468x/1 您将看到,当您运行它并将结果窗口缩小到大约350px时, 元素开始溢出。 我已经尝试从.main-content规则中删除我的line-height和font-size属性,但它仍然溢出。

  • 所以我不知道该怎么解释,但我会试着解释的。我有一个评论页面。帖子是一个顶部,下面的评论字段。在这两者的中间是评论。现在的问题是,在几个注释之后,用户最终不得不向下滚动相当多的时间来查看表单。我想做的是显示4个评论,然后当用户向下滚动时,他们会看到更多。只有当他们在评论上滚动时。所以它类似于,但是在div上。这里有更多的信息来可视化它 如果用户在任何注释上滚动,它将像一样滚动,并显示更多注释。所以它

  • 问题内容: 为什么CSS属性不能在中正常运行,而效果很好? 从CSS规范1,2,我不明白为什么。 问题答案: 我从这里得到了东西! 安德鲁·费多纽克(Andrew Fedoniouk)写道: 这实际上是我的问题:“一个技术原因是溢出属性不适用于表。” -为什么?这是什么原因 我不是专家,但是我相信这只是为了与旧表行为向后兼容。您可以在规范中检查“自动”表布局算法。我很确定该布局算法与溢出属性不兼容

  • 问题内容: 我将以下布局考虑在内。每个列表项由两列表示。第二列应占用所有可用空间,但 如果第一列占用太多空间,则应以最小大小将其固定在右侧。第一栏应显示省略号。 问题在最后一种情况下发生。当第一列包含太多文本时,它没有显示省略号,而是将其自身拉伸到弹性框之外,从而导致出现水平滚动条,而第二列则没有锚定在右侧。 问题答案: 更新 添加有效的代码: 原始答案/解释。W3C规范说:“ 默认情况下,弹性项

  • 嗯,我也试着把它藏在身体里!还是不工作..?