CSS 스크롤 스냅 지점 소개
그만큼 CSS 스크롤 스냅 모듈 우리에게 몇 가지 제어 기능을 제공하는 웹 표준입니다. 웹 페이지에서 스크롤하기 그래서 사용자가 페이지의 특정 부분으로 스크롤하지 않고 페이지의 특정 부분으로 스크롤하도록 할 수 있습니다..
스크롤링 웹 사이트에서 가장 많이 수행되는 작업 중 하나입니다. 브라우저는 수년 동안 스크롤링 성능 향상 사용자의 민첩한 손가락 강도와 일치시킵니다. 그리고 개발자들은 창조적으로 스크롤링 사용 더 나은 사용자 경험을 얻기 위해.
그러나, 코딩 및 스크롤링, 자바 스크립트 만이 후자에 대해 어느 정도의 통제력을 가진 것으로 보였다. 이것은 오랜 기간 동안 이었지만 스크롤 스냅 점의 도입, CSS가 따라 잡기 시작했습니다..
스크롤 스냅 점없이 스크롤
일반적으로 휴대 전화에서는 특히 느리게 스크롤하지 않습니다. 스크롤 속도가 빠르면 컨트롤 속도가 느려집니다. 화면에서 어디서 끝내 죠? 스크롤을 멈췄을 때.
웹 사이트의 제품 이미지 배열이나 사진 갤러리 또는 온라인 슬라이드를 통해 스크롤하고 있다고 가정 해보십시오. 그런 응용 프로그램에서 당신이 선호하는 것은 전체 제품, 사진 또는 슬라이드보기 스크롤 할 때마다 뿐만 아니라 부품 제품 이미지, 사진 또는 슬라이드.
예를 들어 아래의 데모에서는 사용자가 스크롤을 멈출 때마다 볼 수 있습니다. 약 절반의 이미지가 보인다. 화면 하단에 있습니다. 그러나 대부분의 사용자는 마지막 이미지를 완전히 보길 원합니다..
스크롤 스냅 점으로 스크롤하기
이것은 우리가 가져 오는 곳입니다. CSS 스크롤 스냅 점. 이름은 자명하다. CSS 표준을 통해 항목을 제자리에 고정 시키십시오. 스크롤 할 때.
있다 5 개의 CSS 속성 이 표준을 구성하는
스크롤 - 스냅 - 타입스크롤 - 스냅 - 포인트 - 엑스스크롤 - 스냅 - 포인트 - y스크롤 - 스냅 - 좌표스크롤 - 스냅 - 목적지
브라우저 지원
속성 필요한 것 -웹킷 과 -ms 접두어 관련 브라우저의 경우 이 기사를 쓰는 시점에서, CSS 스크롤 스냅은 Chrome과 Opera에서 지원되지 않습니다..
가까운 4 개의 속성은 가까운 미래에 사용자 에이전트에 의해 삭제 될 가능성이 있습니다. 대신, 새로운 속성, 즉 스크롤 - 스냅 - 정렬, 스크롤 - 스냅 - 마진, 과 스크롤 - 패딩, 만들어 질 수도있다., 이 명세서에 정의 된대로.
그러나 그들은 비슷한 목적을 가지고있다. 이전 속성으로. 현재 이전의 속성 집합은 정상적으로 작동합니다..
등록 정보
너는 ~해야 해. 더하기 스크롤 - 스냅 - 타입 스크롤 컨테이너의 속성 (스크롤되는 동안 자식이 오버플로되는 컨테이너 요소). 그것은 스냅 동작의 엄격 성. 다음 세 가지 값을 사용할 수 있습니다.
의무적 인- 스크롤이 끝나면 스크롤은 관련 스냅 점에서 스냅근접- 덜 엄격한의무적 인; 그것은 판단력에 달려있다. UA 요소가 주어진 스냅 점에서 스냅되는지 여부없음- 짤깍 소리가 나지 않는다.
그만큼 스크롤 - 스냅 - 포인트 - 엑스 과 스크롤 - 스냅 - 포인트 - y 속성들 스크롤 컨테이너에 속하다., 너무. 스냅 점이있는 x 축과 y 축의 점을 나타냅니다. 그들의 가치는 ~에 의해 주어진 반복() 기능. 예를 들어, 간격으로 x 축을 따라 스냅 점을 추가하려면 100px 당신은 스크롤 - 스냅 - 포인트 - 엑스 : 반복 (100px) 규칙.
그만큼 스크롤 - 스냅 - 목적지 속성도 스크롤 컨테이너에 추가됩니다. 그것 컨테이너상의 좌표를 정의한다. 스냅 대상이있는 곳. 이 스냅 목적지에서 컨테이너의 자식이 스크롤 될 때 제자리에 고정됩니다.
당신은 스크롤 - 스냅 - 좌표 재산과 관련하여 스크롤 - 스냅 - 목적지. 컨테이너의 자식 요소에 추가해야합니다. 그것 자식 요소의 좌표를 정의한다., 사용자가 화면을 스크롤 할 때 스크롤 컨테이너의 대상 좌표와 정렬됩니다..
한 번에 모든 속성을 사용할 필요는 없습니다.. 만 스크롤 - 스냅 - 타입 의무적이다.. 이와 함께 개별 스냅 점을 정의하거나 대상 좌표 조합을 사용할 수 있습니다.
코드 예제
다음은에 대한 예제 코드 스 니펫입니다. 전형적인 스크롤 컨테이너, 와 세로 방향으로 스크롤하고 내부 이미지를 스크롤. 이 게시물의 시작 부분에서 찾을 수있는 데모를 출력합니다..
div width : 300px; 높이 : 300px; overflow : auto; ... div> img width : 250px; 높이 : 150 픽셀, ...
이제, 우리 일부 스냅 점 추가 스크롤 컨테이너에 :
div width : 300px; 오버플로 : 자동; 스크롤 - 스냅 - 포인트 - y : 반복 (150 픽셀); scroll-snap-type : 필수;
아래에서 출력의 모양을 볼 수 있습니다. CSS 스냅 포인트가 추가되었습니다.. 하단 이미지가 부분적으로 만 보이는 동안 스크롤이 중지 될 때마다 전체 이미지가 나타납니다. 스크롤 포트가 위에있는 스냅 포인트에 스냅 한 후.
