CSS 스크롤 스냅 포인트와 함께 직관적 인 스크롤 인터페이스-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 스크롤 스냅 포인트와 함께 직관적 인 스크롤 인터페이스

Christopher Nolan

Feb 23, 2025 am 11:39 AM

CSS 스크롤 스냅 포인트 : 부드러운 스크롤 스크롤을위한 기본 CSS 기술 CSS 스크롤 스냅 포인트 (기본 CSS 전용 솔루션)를 사용하여 쉽게 스크롤 및 패닝 레이아웃을 만듭니다. 이 강력한 기술은 스크롤 행동을 정확하게 제어하여 페이지 매김과 같은 기능을 쉽게 할 수 있습니다. 이전에는 개발자 가이 기능에 대해 JavaScript (종종 jQuery)에 크게 의존했습니다. 그러나 기본 CSS 접근법은 본질적으로 더 효율적이고 간소화됩니다.

여전히 비교적 새롭지 만 스크롤 스냅 포인트는 광범위한 브라우저 지원을 즐기고 실제 구현을위한 안정성을 제공합니다.

주요 개념 :

기본 CSS 솔루션 :

JavaScript 라이브러리의 필요성을 제거합니다 Intuitive Scrolling Interfaces with CSS Scroll Snap Points 컨테이너 및 스냅 포인트 스크롤 :

컨테이너 요소를 지정하고 내부 요소를 스냅 포인트로 정의하십시오. 스크롤링은이 지점들 사이에서 "스냅"하도록 수정됩니다 필수 CSS 속성 :

, 및 제어 스냅 동작. 실제 응용 프로그램 : 대화 형 섹션 스크롤러, 동적 이미지 갤러리 (다양한 크기) 및 균일 한 이미지 크기를 가진 반응 형 갤러리 생성. 브라우저 호환성 :

최신 브라우저에서 널리 지원됩니다 (아래 세부 호환성 참고 사항 참조).

스크롤 스냅 포인트 이해 : 프로세스에는 "스크롤 컨테이너"요소를 정의하는 것이 포함되며 모든 스크롤 가능한 컨텐츠를 보유합니다. 이 컨테이너의 특성은 높이/폭, 스크롤 축 (x, y 또는 둘 다), 스냅 강도 및 스냅 포인트 오프셋과 같은 스크롤 행동을 지시합니다. 스크롤 컨테이너 내의 내부 요소는 스크롤 대상 인 "스냅 포인트"가됩니다. 각 스냅 포인트는 컨테이너에 비해 자체 오프셋을 가질 수 있습니다.
Core CSS 속성 :
: (스크롤 컨테이너에 설정)는 요소가 스냅되는 X 및 Y 좌표 (컨테이너에 대해)를 정의합니다. 픽셀 값, 백분율 또는 뷰포트 장치 (VW, VH)를 허용합니다. 예제 : , scroll-snap-destination.
(각 스냅 포인트에 설정)는 스냅 대상에 대한 스냅 포인트의 x 및 y 오프셋을 지정합니다. 이를 통해 스냅 포인트 내에서 요소 위치를 미세 조정할 수 있습니다.
와 비슷한 값을 허용합니다. 예제 : , scroll-snap-coordinate. scroll-snap-destination scroll-snap-coordinate: 50% 0% scroll-snap-coordinate: 100px 0px

: (스크롤 컨테이너에 설정) 스냅 강도를 제어합니다 : , 또는 . 는 가장 가까운 지점으로 스냅을 시행합니다. 지점에 가까운 경우에만 스냅됩니다.
실제 예제 (간결성을 위해 코드 펜에 대한 링크) :
전체 폭 섹션 스크롤러 : scroll-snap-type는 동적 크기 섹션으로 스냅하는 것을 보여줍니다 동적 갤러리 (다른 크기) : 다양한 종횡비의 이미지를 처리합니다. none 반응 갤러리 (동일 크기) : mandatory 완벽한 정사각형 이미지가있는 응답 갤러리를 만듭니다. 수평 및 수직 스크롤 버전이 모두 표시됩니다 proximity 브라우저 지원 : mandatory proximity Firefox 39 :
전체 지원. ie10, ie11, edge :