> 웹 프론트엔드 > CSS 튜토리얼 > 스크롤 바 반사

스크롤 바 반사

Christopher Nolan
풀어 주다: 2025-03-20 09:21:12
원래의
943명이 탐색했습니다.

스크롤 바 반사

Mac 개발자,이 팁에 주목하십시오. 시스템 환경 설정> 일반> 스크롤 바 표시 로 이동하여 항상 표시 하도록 설정을 변경하십시오. 이것은 개인적으로가 아니라 웹 페이지의 최선의 프리젠 테이션을위한 것입니다. 이 설정이 없으면 스크롤 바에 의해 트리거 된 레이아웃 오프셋을 경험하지 않지만이 설정이 활성화 된 다른 모든 사용자가 발생합니다. 이러한 성능 문제를 피하려면이 설정을 직접 사용해야합니다.

Stefan Judis는 뷰포트 장치의 사용 이이 문제의 이유 중 하나 일 수 있음을 보여줍니다.

수직 스크롤 막대가 이미 존재하고 공간의 일부를 차지하기 때문에 코드의 100vw 수평 오버플로를 유발합니다. 이것은 매우 불합리한 느낌이지만 그것은 진실입니다.

Stefan 은이 문제를 다루는 것에 대한 Kilian Valkhof의 기사를 지적합니다. 클래식 솔루션 :

간단한 방법은 width: 100% . 백분율에는 스크롤 막대의 너비가 포함되어 있지 않으므로 자동으로 적응합니다.

이 작업을 수행 할 수 없거나 다른 요소의 너비를 설정하는 경우 오버 overflow-x: hidden 있거나 overflow: hidden 스크롤 바를 방지하십시오.

Kilian Valkhof ,“수평 스크롤 막대의 이유를 찾는 방법”

나는 그들 중 어느 누구도 당신의 요구를 완전히 충족시키지 않기 때문에 모든 편의라고 생각합니다.

다행히 사양 기반 솔루션이 곧 출시 될 예정입니다. Bramus는 이것에 대해보고했습니다.

웹 페이지에 스크롤 막대를 표시 할 때 부작용은 스크롤 막대 유형에 따라 컨텐츠 레이아웃이 변경 될 수 있다는 것입니다. scrollbar-gutter CSS 속성 (Chromium Soon에서 출시)은 개발자에게이를보다 효과적으로 제어 할 수 있도록 설계되었습니다.

Bramus van Damme , "스크롤 바로 인한 예상치 못한 레이아웃 오프셋을 방지하기 위해 scrollbar-gutter CSS 속성 사용"

이것은 해결 방법처럼 들리며, 이것이 재설정 스타일 시트에서 매우 일반적인 코드 라인이 될 것이라는 데는 의심의 여지가 없습니다.

 몸 {
  Scrollbar-Gutter : 안정적인 두 편집;
}
로그인 후 복사

그러나 이것은 전체 페이지 레벨에서 스크롤바 문제를 다룰 때 scrollbar-gutter 속성이 작동하는 것을 상기시켜줍니다. overflow 속성 대신? overflow 속성은 과거에 관련 측면을 스크롤하는 것과 관련하여 이상했습니다. 모든 브라우저에서 실제로 구현할 수 있습니까? 누가 알 겠어요. 가능성이 높지만, 가까워지고 사양에 따라 작동하더라도 사용해 보겠습니다. 진보적 인 향상에 적합한 것 같습니다.

위 내용은 스크롤 바 반사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿