scrollIntoView는 얇게 썬 빵 이후로 가장 좋은 것입니다.

특히 애니메이션의 경우 요소를 보기로 스크롤하는 것이 어려웠습니다. 이제 Element.prototype.scrollIntoView로 매우 쉽습니다!

에 대한 온라인 아트 갤러리에서 작업했습니다. 그녀는 놀라운 예술가입니다. 큐레이터는 그녀의 작품에 집중해야 하므로 초소형 룩을 추구합니다.



나는 갤러리를 걷는 것과 같은 디지털 장치가 필요하므로 여기에서 다시 이미지 회전 목마를 만들고 있습니다. 회전 목마를 코딩했던 모든 시간을 생각하려고 노력했지만 오래 전에 카운트를 놓친 것이 기억났습니다. 내가 만든 이미지 캐러셀이 미국의 모든 lexus.com 자동차 모델 페이지에 사용된 적이 있습니다.

몇 년 전에는 슬라이드를 보기 안팎으로 애니메이션화하는 데 많은 코드가 필요했습니다. 솔루션에는 각 슬라이드와 전체 컨테이너의 너비를 동적으로 계산하기 위한 몇 가지 간단한 수학 및 메커니즘이 포함되었습니다. 캐러셀이 시작된 위치와 도달해야 하는 위치를 파악한 후에는 요소의 위치를 ​​트위닝하는 방법을 구현해야 했습니다. 몇 줄의 코드가 필요했습니다. 이제 필요한 것은 하나뿐입니다.

document.querySelector('some-element').scrollIntoView({behavior: 'smooth'});

위의 코드 줄은 요소를 선택하고 보기로 스크롤하면서 애니메이션을 적용합니다.

저는 Angular로 이 앱을 코딩하고 있습니다. 그것이 제가 항상 사용하는 것이기 때문입니다. 최근에 웹 구성 요소에 뛰어들었지만 이 사이트를 빨리 배송해야 합니다. 내 Angular 구성 요소의 템플릿은 다음과 같습니다.

<img class="ctrl --left" src="/assets/arrow-left.svg" (click)="slide('-')">
<img class="ctrl --right" src="/assets/arrow-right.svg" (click)="slide('+')">

<div class="gallery" #gallery>
  <div class="slide" #slide *ngFor="let media of (media$ | async)" >
    <img [attr.src]="fetchImage(media.filename)" />
  </div>
</div>

여기에 몇 가지 일이 있습니다. 클릭에 대한 이벤트 리스너는 왼쪽 및 오른쪽 버튼에 바인딩됩니다. ngFor는 미디어 배열인 데이터 모델을 반복합니다. async가 Observable이기 때문에 media$ 파이프를 사용하고 있습니다. 서비스에서 http 요청은 데이터 모델을 가져오고 이 구성 요소는 응답을 구독합니다. 각 이미지의 src는 Media 개체의 속성에 의해 설정됩니다.

내 Angular 구성 요소에서 ViewChildren가 있는 각 슬라이드를 선택합니다.

@ViewChildren('slide') slides: QueryList<ElementRef>;

템플릿에서 각 div에 #slide 태그를 지정하여 슬라이드 요소를 선택할 수 있도록 했습니다.

사용자가 화살표 버튼 중 하나를 클릭하면 슬라이드 메서드가 내 구성 요소에서 호출됩니다.

<img class="ctrl --left" src="/assets/arrow-left.svg" (click)="slide('-')">
<img class="ctrl --right" src="/assets/arrow-right.svg" (click)="slide('+')">

슬라이드 메서드에서 우리는 현재 인덱스를 추적하고 animate 메서드를 호출하여 사용자가 첫 번째 슬라이드를 지나 음수 영역으로 이동하거나 마지막 슬라이드를 넘어갈 수 없도록 합니다.

 slide(ctrl: string) {
    if (ctrl === '-') {
      if (this.index > 0) {
        this.index = this.index - 1;
        this.animate('-');
      }
    }
    if (ctrl === '+') {
      if (this.index < this.length - 1) {
        this.index = this.index + 1;
        this.animate('+');
      }
    }
  }

이 캐러셀 코딩을 시작했을 때 animate가 방향을 알아야 한다고 생각했습니다. 이전부터 기억한다면 슬라이드에 애니메이션을 적용하려면 많은 수학이 필요했습니다. 양수 또는 음수 방향은 캐러셀이 왼쪽 또는 오른쪽으로 이동해야 하는지 파악하는 데 필수적이었습니다. scrollIntoView는 방향을 해석할 필요가 없습니다. scrollIntoView는 요소에 애니메이션을 적용합니다.

이것이 이 캐러셀의 슬라이드에 애니메이션을 적용하는 방법입니다.

animate() {
  this.slides.toArray()[this.index].nativeElement.scrollIntoView({behavior: 'smooth'});
}

Element.prototype.scrollIntoView에 대한 전체 참조는 visit MDN .

저는 이scrollIntoView API가 얇게 썬 빵 이후로 가장 좋은 것이라고 생각합니다. 적어도 당신이 ❤️ 나처럼 탄수화물을 섭취한다면. 보기로 스크롤되는 요소에 애니메이션을 적용하는 것은 사용자에게 피드백을 제공하는 매우 좋은 방법입니다. Element.prototype.scrollIntoView 를 사용하면 이 동작을 거의 무료로 얻을 수 있습니다. 다른 모든 밝고 반짝이는 새 API와 마찬가지로 모든 브라우저에서 이것을 사용할 수 있는지 궁금합니다.

Can I use 표를 보면 거의 모든 브라우저가 부분적으로만 지원하는 것을 볼 수 있습니다. 제가 정말 중요하게 생각하는 유일한 기능인 원활한 동작이 빠졌습니다!



다행스럽게도there is a polyfill 브라우저가 '부드러움'을 광범위하게 지원할 때까지(즉, 지원하는 경우) 이 동작을 수정합니다.

이 캐러셀에서 아직 해야 할 일이 남아 있지만 지금까지 이미지를 이렇게 빨리 애니메이션화할 수 있다는 것이 인상적이었습니다. 이 접근 방식에는 비용이 듭니다. 기본 스크롤바는 그대로 유지됩니다. 이 캐러셀은 Windows에서 그렇게 작게 보이지 않습니다. 다시 한 번 슬라이드를 전환하는 방법을 알아낸 것 같습니다. Web Animations API가 있어서 다행입니다.



계속하려면...