오버플로 수정: Firefox의 스크롤 패딩

전제와 문제

(내 오프닝 컨텍스트 및 jump to the workaround을 건너뛸 수 있습니다.)

나는 최근에 Josh Comeau의 환상적인CSS for JavaScript Developers 과정에서 연습을 하는 동안 스크롤 요소의 패딩 문제에 부딪혔습니다.

더 구체적으로 말하자면, 이 스크롤 버튼 컨테이너를 구현하려고 했습니다.



버튼 행은 컨테이너의 전체 너비를 차지할 수 있지만 왼쪽 가장자리로 스크롤할 때 왼쪽에 약간의 패딩이 있고 오른쪽 가장자리로 스크롤할 때 오른쪽에 약간의 패딩이 있습니다. 이 패딩을 어떻게 얻습니까?

스크롤 컨테이너에 padding-left 및 padding-right 속성을 추가하면 다음과 같이 이 문제가 해결될 것이라고 추측할 수 있습니다.



이것은 그것을 고칠 것입니다 ... 거의. 스크롤 컨테이너의 패딩은 WebKit 브라우저에서 잘 작동하지만 Firefox에서 이를 시도하면 문제가 발생합니다.



Dev Tools를 사용하여 스크롤링 컨테이너를 검사하면 확실히 padding-right 가 있음을 알 수 있습니다. 그러나 다른 브라우저와 달리 Firefox는 이 패딩을 스크롤 가능한 공간의 일부로 간주하지 않습니다.



아, 브라우저 호환성 문제를 좋아하지 않습니까?

(ℹ 호기심을 위해 W3C 토론은 여기에서 원하는 동작에 대해 앞뒤로 진행되었습니다. 궁극적으로 그들은 WebKit 구현이 올바른 것으로 결정했습니다. Firefox용 버그 추적기에는 최신 업데이트를 볼 수 있는 an open issue logged이 있습니다. 최종 수정에.)

오버플로에 대한 해결 방법:Firefox의 스크롤 패딩

CSS의 경우와 마찬가지로 몇 가지 해결 방법이 있습니다. 스크롤링 컨테이너에서 padding-right를 제거하고 대신 내부의 마지막 하위 요소에 여백으로 해당 공간을 추가하기로 선택했습니다.

.scroll-container > *:last-child {
  margin-right: 32px;
}

이것을 세분화:

.scroll-container는 자명합니다. 이것은 스크롤 요소입니다.

*는 CSS의 범용 선택자입니다. 모든 요소와 일치합니다.

:last-child는 유사 클래스 선택자입니다. 수정자 역할을 합니다. 즉, *:last-child는 부모 요소의 마지막 자식인 모든 요소를 ​​선택합니다.

>는 child combinator입니다. 내 규칙은 *:last-child의 직계 자식인 경우에만 .scroll-container에 적용됩니다. 이렇게 하면 실수로 손자 요소 또는 그 이상에 원치 않는 여백을 적용하지 않습니다.

(⚠ 범용* 선택자는 불편할 수 있습니다. 스크롤링 컨테이너의 마지막 자식이 무엇인지 알고 있다면 이를 보다 구체적인 선택자로 교체하는 것이 좋습니다.)

아래의 Codepen 데모에서 이를 실제로 볼 수 있습니다.