首页 > web前端 > css教程 > 为什么 `flex-direction: column-reverse` 会导致 Firefox、Edge 和 IE 中的滚动问题?

为什么 `flex-direction: column-reverse` 会导致 Firefox、Edge 和 IE 中的滚动问题?

DDD
发布: 2024-11-01 13:20:03
原创
768 人浏览过

Why Does `flex-direction: column-reverse` Cause Scrolling Issues in Firefox, Edge, and IE?

Flexbox column-reverse 在 Firefox、Edge 和 IE 中的滚动问题

当尝试创建一个包含 div 列表的响应式应用程序时在较大的屏幕上以向上滚动的方式显示,在较小的屏幕上以相反顺序向下滚动的方式显示,使用 Flexbox 属性“column-reverse”似乎是一个理想的解决方案。然而,它在 Chrome 以外的浏览器中导致了一个特殊的问题。

HTML 结构和 CSS 样式

HTML 由一个“列表”div 组成,其中包含一系列“项目”div。 CSS 将“display:flex”和“flex-direction:column-reverse”分配给“list”div,确保项目垂直堆叠并反转。高度和“overflow-y”属性启用了垂直滚动,并添加了边框以提高视觉清晰度。

跨浏览器滚动行为

在 Chrome 中,“列表” ' div 显示了一个功能性滚动条,允许用户向上滚动以查看以前的项目。然而,在 Firefox、Edge 和 IE11 中,滚动条出现但仍处于禁用状态,无法滚动。

错误说明

调查显示此行为是 Firefox 中的错误、Edge 和 IE11。当使用'flex-direction:column-reverse'和'overflow-y:auto'时,滚动条不存在。

解决方案

如果'column'属性使用而不是“column-reverse”,滚动条在所有浏览器中都可以使用。 “justify-content: flex-end”属性对于对齐“list”div 底部的项目以实现正确的向下滚动也是必要的。

其他信息

有关此问题的更多详细信息可以在以下资源中找到:

  • Bug 1042151 - flex-direction: column-reverse (或 "flex-direction:column; justify-content:flex-end ") 带有溢出-y:自动不可滚动
  • Philip Walton / flexbugs - 列反转和溢出-y 不可滚动

以上是为什么 `flex-direction: column-reverse` 会导致 Firefox、Edge 和 IE 中的滚动问题?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板