오프닝

다음 표시 영역에 여러 슬라이드를 표시하는 슬라이더를 만들려면

요소의 scrollLeft나 translateX 값을 자주 조작할 수 있을 것 같습니다.
그러나 액체가 대응하는 상황에서 scroll Left와translateX의 실시 방법을 사용한다면resize 이벤트마다 슬라이드의 width를 다시 계산하고 이동하는 위치를 조정해야 하기 때문에 시간이 좀 걸린다.
이럴 때 scrollIntoView 를 사용하면 쉽게 설치할 수 있다.

더 편할 수 있어요.네, scroll IntoView라면

scrollIntoView

요소 인터페이스의 scrollIntoView () 방법은 사용자가 scrollIntoView () 를 호출하는 요소를 볼 수 있을 때까지 요소의 부모 용기를 스크롤합니다.
참조: scrollIntoView() - MDN
아래에 기술하면 요소가 보이는 곳으로 가져갈 수 있는 방법이다.

element.scrollIntoView();

매개변수에 부울 값을 전달하여 표시 요소가 표시 영역의 위쪽 또는 아래쪽에 있는지 설정할 수 있습니다.
규정치가 참이다.

사실이면 요소의 위쪽이 스크롤 가능한 조상 표시 영역의 위쪽에 있도록 스크롤합니다.

만약 가짜라면, 원소의 하단을 굴릴 수 있는 조상의 표시 범위의 하단에 굴린다.

참조: scrollIntoView() - MDN

슬라이더 설치 시 참고 사항

슬라이더를 만들 때 표시하고자 하는 슬라이더를 호출하는 방법scrollIntoVeiw만 사용하면 됩니다!하고 싶은 말이지만 조심해야 해요.
하면, 만약, 만약...

슬라이더뿐만 아니라 전체 화면도 굴러간다

부드러운 스크롤을 지원할 수 없음

표시 영역의 중앙에 슬라이드를 표시할 수 없음

문제
다음은 상술한 문제가 발생한 실시 예이다.
See the Pen scrollIntoViewSlider by yuki-kojima ( @kjkj_ongr )
on CodePen .
이건 안 돼요.p>
이 문제를 해결하기 위해서는 scrollIntoView();의 매개 변수를 옵션으로 지정해야 한다scrollIntoViewp>

scrollIntoViewOptions

IE 및 Safari 이외의 브라우저에 해당하는 scrollIntoViewOptions 옵션 설정입니다.

boolean 값 대신 변수 전달scrollIntoView으로 대상 요소의 위치와 부드러운 스크롤 유무를 설정할 수 있습니다p>

위에서 말한 바와 같이 매개 변수를 전달하지 않고true를 전달하는 상태를 설정하지만scrollIntoViewOptions이 적용되기 때문에 전체 화면이 상부로 굴러갔다p>

슬라이더를 설치할 때 scrollIntoViewOptions 로 설정하면 전체 화면이 굴러가는 것을 방지할 수 있습니다p>

다음은 클릭 버튼에 해당하는 슬라이드를 표시하는 슬라이더를 {block: "start", inline: "nearest"} 사용한 예입니다.

객체 요소의 수평 표시 위치를 슬라이더의 중심으로 설정하고 부드러운 스크롤을 적용합니다.

액체도 있어요.p>

See the Pen scrollIntoViewSlider-options by yuki-kojima ( @kjkj_ongr )
on CodePen .

슬라이더도 쉽게 설치할 수 있습니다.

예, IE와 Safari를 제외하고는p>

先生、IEとSafariでもscrollIntoViewOptionsを使いたいです

이럴 때 추천하는 건 scroll-into-view-if-needed 그리고 smooth-scroll-into-view-if-neededp>

scroll-into-view-if-neededとは

아직 표준화block: "nearest"되지 않은 Ponyfill1npm 포장p>

scrollIntoView는 표시하고자 하는 요소가 표시 구역에 없는 상황에서만 굴러가는 규격으로 요소를 표시 구역에 가져간다는 점은 기본적으로scrollIntoViewIfNeeded와 같다p>

scrollIntoViewIfNeeded - MDN

이 패키지를 사용하면 scrollIntoViewIfNeeded 위치를 표시하고 부드럽게 스크롤하는 유무를 표시하는 거의 동일한 Option으로 설정할 수 있습니다.

호출 방법에 관해서는 표시하고자 하는 요소를 첫 번째 파라미터에 전달하는 것을 제외하고는 scrollIntoView과 기본적으로 같다p>

import scrollIntoView from 'scroll-into-view-if-needed'

scrollIntoView(taregtElement, {
  behavior: "smooth",  // スムーススクロールを有効化: auto/smooth
  block: "end",  // 上下方向の位置: start/center/end/nearest
  inline: "start" // 水平方向の位置: start/center/end/nearest
});

하지만 scrollIntoView 옵션을 scrollIntoView 로 설정해도 부드럽게 스크롤하는 브라우저에서만 사용할 수 있습니다.

IE나 Safari 등에서 매끄러운 스크롤을 하려면 smooth-scroll-into-view-if-needed 를 사용하십시오p>

smooth-scroll-into-view-if-needed とは

behavior의 매끄러운 스크롤도 Ponyfill의 포장이다.동일한 개발자의 패키지이며 사용 방법도 동일합니다.

모든 브라우저에서 우선 부드러운 스크롤을 사용하려면 여기를 사용하십시오.p>

import smoothScrollIntoViewIfNeeded from 'smooth-scroll-into-view-if-needed'

smoothScrollIntoViewIfNeeded(taregtElement, {
  behavior: "smooth",  // スムーススクロールを有効化: auto/smooth
  block: "end",  // 上下方向の位置: start/center/end/nearest
  inline: "start" // 水平方向の位置: start/center/end/nearest
});

참고로 IE 대응 시 Polyfillsmooth이 필요하니 적당히 추가하세요p>

IEとSafariでもスムースなスライダーを作ってみる

다음은 smooth-scroll-into-view-if-needed를 사용하여 슬라이더를 만드는 예입니다.p>

See the Pen smooth-scroll-into-view-if-needed-slider by yuki-kojima ( @kjkj_ongr )
on CodePen .

유창하네.(※ 개인 소감)

まとめ

• 슬라이더 설치scroll-into-view-if-needed 편리
• 브라우저에서 사용하고 싶은 경우Promise
• 브라우저에서 부드러운 스크롤을 사용하려면 scroll-into-view-if-needed
  

2020년은 이미 끝났다.한 해의 추억을 스케이트보드로 만들어보는 게 어때요?p>

---

1. 
   Ponyfill 정보 참조smooth-scroll-into-view-if-neededこちら