CSS에서 스냅 스크롤 : 스크롤 동작 제어

CSS 스크롤 스냅 : 부드러운 스크롤 인터페이스를 쉽게 만듭니다 Tiffany의 CSS 마스터, 2 판 에서 발췌 한 내용은 현대적이고 앱과 같은 웹 경험을 구축하기위한 강력한 도구 인 CSS 스크롤 스냅 모듈을 탐색합니다. Scroll Snap은 스크롤 동작을 정확하게 제어 할 수 있으므로 많은 경우 JavaScript가 필요하지 않습니다.

CSS 스크롤 스냅 모듈이 발전했습니다. 이전 버전의 Edge, Internet Explorer 및 Firefox의 이전 버전과 같은 브라우저에서 구현 된 이전 버전 (Scroll Snap Points )은 픽셀 기반 접근법을 사용했습니다. 그러나 현대식 브라우저 (Chrome 69, Safari 11)는 여기에서 초점 인 상자 정렬 모델을 사용합니다. "포인트"를 언급하거나 또는 속성을 ​​사용하는 구식 자습서를 조심하십시오. 설명 할 간단한 슬라이드 쇼를 만들어 봅시다. HTML은 놀랍도록 간단합니다

추가 포장지 나 자바 스크립트가 필요하지 않습니다! CSS는 무거운 리프팅을 수행합니다

의 필수 스냅으로 수평 스크롤을 정의합니다. 는 이미지를 가로로 배열합니다. 각 이미지를 뷰포트에 중심으로합니다

더 깊은 다이브를 보려면 Google Web Fundamentals 'Guide, "CSS 스크롤 스크롤을 사용하여 잘 통제 된 스크롤"을 참조하십시오. 자주 묻는 질문 scroll-snap-points-x scroll-snap-points-y

CSS 스크롤 스크롤 란 무엇입니까?

CSS 스크롤 스냅은 부드럽고 제어 된 스크롤, 회전식 또는 PAGED 인터페이스에 이상적입니다. 스크롤 위치를 관리하고 특정 지점으로 볼 수 있습니다.

<div>
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341843771.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341850848.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341981083.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341944975.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915342067175.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img></div>

* {
   box-sizing: border-box;
}

html, body {
    padding: 0; 
    margin: 0;
}

.slideshow {
  scroll-snap-type: x mandatory; /* Scroll axis and behavior */
  overflow-x: auto;              /* 'scroll' or 'auto' */
  display: flex;
  height: 100vh;
}

.slideshow img {
  width: 100vw;
  height: 100vh;
  scroll-snap-align: center;
}

일반 스크롤과 어떻게 다릅니 까?

일반 스크롤링은 자유롭게 흐르고 있습니다. 스크롤 스냅은보다 예측 가능한 사용자 경험을 위해 정의 된 중지 점을 제공합니다. scroll-snap-type: x mandatory display: flex scroll-snap-align: center 어떻게 구현합니까?

컨테이너 (예 : ,

또는 ) 및 (예를 들어,

, , ).

값?

,

또는
• 축을 지정합니다. 컨트롤 스냅 엄격함.

브라우저 지원? 최신 브라우저에서 널리 지원되지만 업데이트를 확인하십시오.

일반적인 사용 사례? 이미지 회전 목마, PAGED 레이아웃, 단면 내용

스크롤 속도 제어 스크롤 속도?

직접적이지 않고 스냅 포인트 사이의 거리를 조정하여 간접적으로. 디버깅?

브라우저 개발자 도구 (예 : Chrome의 스크롤 스냅 하이로있어) 사용

모바일 지원? 예, 모바일 장치에서 완전히 작동합니다

위 내용은 CSS에서 스냅 스크롤 : 스크롤 동작 제어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!