탄성 오버플로 스크롤

많은 모바일 장치에는 고무 밴드와 같은 스크롤 효과가있어 사용자가 뷰포트의 가장자리를 넘어 거리를 스크롤 할 수 있으며 페이지가 놓인 후에 페이지가 원래 위치로 반등됩니다. 이 효과는 iOS 사파리와 같은 대부분의 브라우저에서 자동으로 구현됩니다. 그러나이 "고무 밴드"스크롤 효과를 달성하고 터치가 아닌 장치와 호환되는 것은 쉽지 않습니다. CSS에는이 효과를 제어하기위한 직접적인 특성이 없으며, 비표준

특성이 있지만 다른 모멘텀 스크롤에 사용됩니다.

이 고무 밴드 효과를 강요 해야하는 경우 일반적으로 JavaScript를 사용하여 스크롤 리스너를 추가하거나 , -webkit-overflow-scrolling 이벤트를 사용하고 위치 및 관성 운동 등을 추적해야합니다. 그러나 이것은 더 복잡합니다.

이상적으로는 순수한 CSS 솔루션을 사용하고 싶습니다. pointerDown 여러 어린이 요소가있는 컨테이너를 고려하십시오 pointerUp 먼저, 부모 컨테이너가 오버플로 확인하기 위해 몇 가지 기본 스타일을 설정하십시오. pointerMove 키는 자식 요소에 수직 마진을 추가하는 것입니다. 컨테이너에 하나의 긴 요소 만 있으면 해당 요소의 상단과 하단에 여백을 추가하십시오.

이 방법으로, 우리는 가장자리 너머로 스크롤 할 수 있습니다. 반동 효과를 얻으려면

및 속성을 ​​사용해야합니다. 수평 스크롤 요소의 경우 요소의 왼쪽 및 오른쪽 가장자리에 마진을 적용하고 속성의 값을

에서 로 변경합니다.

이게 다야! 이것은 간단하고 효과적인 순수 CSS 솔루션입니다.

<div>
  <div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</div>

관련 리소스 :

"iPhone을 시작한 상징적 인 '고무 밴드'효과의 내부 이야기"(Mac의 컬트) "iOS Safari의 고무 밴드 스크롤에 대해 배운 6 가지"(특수 에이전트 Squeaky) "웹 사이트에서 튀는 스크롤"(Smashing Magazine)

/* 父容器，设置固定尺寸以产生溢出 */
.carousel {
  width: 200px;
  height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* 子元素容器，垂直排列 */
.slides {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  height: fit-content;
}

/* 每个子元素占据容器全宽 */
.slide {
  width: 100%;
  aspect-ratio: 1;
}

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