CSS에서 스크롤 상자를 결정하는 것은 무엇입니까?

CSS에서 스크롤 상자를 정의하는 것은 무엇입니까?

CSS에서 "스크롤 상자"라는 용어는 고정 위치 지정이라는 맥락에서 의미를 갖습니다. Positioned Layout Module Level 3 초안에 따르면 고정 상자의 오프셋은 스크롤 상자가 있는 가장 가까운 상위 항목을 기준으로 계산됩니다.

고정 위치를 제어하려면 스크롤 상자를 식별하는 것이 중요할 수 있습니다. 초안에서 언급한 바와 같이 "플로우 루트"와 같은 관련 용어의 현재 정의 및 사용법은 완전히 최적이 아닙니다.

스크롤 상자 상태 확인

동작을 이해하려면 스크롤 상자의 경우 오버플로 속성의 역할을 고려해 보겠습니다. 스크롤 상자는 일반적으로 오버플로가 보이지 않는 값으로 설정된 상자입니다. 이는 상자의 내용이 잠재적으로 경계를 넘어 확장되어 스크롤 가능하게 될 수 있음을 의미합니다.

예를 들어 다음 코드를 고려해 보겠습니다.

.wrapper {
  height: 200vh;
  border: 2px solid;
}

.wrapper > div {
  position: sticky;
  top: 0;
  height: 20px;
  background: red;
}

<div class="wrapper">
  <div></div>
</div>

이 시나리오에서는 , 상위 .wrapper가 뷰포트보다 크므로 수직 스크롤 막대가 나타납니다. 결과적으로 위치: 고정이 있는 하위 div는 스크롤할 때 .wrapper의 표시 가능 영역 내에서 고정됩니다. 이는 고정 위치 지정에 대한 스크롤 상자의 효과를 보여줍니다.

요약하자면 CSS의 스크롤 상자는 일반적으로 스크롤을 활성화하는 값으로 설정된 오버플로가 있는 상자로 정의됩니다. 디자인에서 끈적한 요소의 동작을 조작하고 제어하려면 이 개념을 이해하는 것이 필수적입니다.

위 내용은 CSS에서 스크롤 상자를 결정하는 것은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!