'flex-direction:column-reverse'가 Firefox, Edge 및 IE에서 스크롤 문제를 일으키는 이유는 무엇입니까?

Firefox, Edge 및 IE에서 Flexbox column-reverse의 스크롤 문제

div 목록이 있는 반응형 애플리케이션을 만들려고 할 때 큰 화면에서는 위쪽 스크롤로 표시되고 작은 화면에서는 반대 순서로 아래쪽 스크롤로 표시되므로 Flexbox 속성 'column-reverse'를 사용하는 것이 이상적인 솔루션처럼 보였습니다. 그러나 Chrome 이외의 브라우저에서는 특이한 문제가 발생했습니다.

HTML 구조 및 CSS 스타일링

HTML은 일련의 항목을 포함하는 '목록' div로 구성되었습니다. '항목' div. CSS는 'list' div에 'display: flex' 및 'flex-direction: column-reverse'를 할당하여 항목이 수직으로 쌓이고 반전되도록 했습니다. 높이 및 'overflow-y' 속성을 통해 세로 스크롤이 가능해졌으며 시각적 명확성을 위해 테두리가 추가되었습니다.

크로스 브라우저 스크롤 동작

Chrome에서는 'list ' div는 사용자가 위로 스크롤하여 이전 항목을 볼 수 있도록 기능적인 스크롤 막대를 표시했습니다. 그러나 Firefox, Edge 및 IE11에서는 스크롤바가 표시되었으나 비활성화된 상태로 유지되어 스크롤이 불가능했습니다.

버그 설명

조사 결과 이 ​​동작은 Firefox의 버그인 것으로 나타났습니다. , 엣지, IE11. 'flex-direction:column-reverse', 'overflow-y:auto' 사용시 스크롤바가 없습니다.

해결책

'column' 속성이 있는 경우 'column-reverse' 대신 사용되면 스크롤바는 모든 브라우저에서 작동하게 됩니다. 올바른 아래쪽 스크롤을 위해 'list' div 하단의 항목을 정렬하려면 'justify-content: flex-end' 속성도 필요합니다.

추가 정보

이 문제에 대한 자세한 내용은 다음 리소스에서 확인할 수 있습니다.

• 버그 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!