Tabs 구성요소 빌드

iOS 및 Android 앱과 유사한 탭 구성요소를 빌드하는 방법에 관한 기본적인 개요입니다.

Adam Argyle

이 게시물에서는 웹용 Tabs 구성요소를 빌드하는 것에 관한 생각을 공유하고자 합니다. 는 반응형이고 다양한 기기 입력을 지원하며 여러 브라우저에서 작동합니다. 데모 사용해 보기

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 데모

동영상을 선호한다면 이 게시물의 YouTube 버전을 참고하세요.

개요

탭은 디자인 시스템의 일반적인 구성요소이지만 다양한 모양과 양식을 작성했습니다. 먼저 <frame> 요소에 기반한 데스크톱 탭이 있었고 이제 부드러운 모바일 구성요소로 구현됩니다. 공간을 절약하려고 하는 거죠.

오늘날 탭 사용자 환경의 핵심은 버튼 탐색 영역입니다. 는 표시 프레임의 콘텐츠 표시 여부를 전환합니다. 다양한 콘텐츠 영역은 같은 공간을 공유하지만 버튼을 클릭합니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 지난 10년간 사용된 탭 구성요소 웹 디자인 스타일의 콜라주

웹 전략

필자는 이 구성 요소를 빌드하기가 매우 간단하다는 것을 알 수 있었습니다. 몇 가지 중요한 웹 플랫폼 기능:

• scroll-snap-points를 사용하면 적절한 스크롤 중지 위치
• URL 해시를 통한 딥 링크 브라우저에서 인페이지 스크롤 앵커링 및 공유 지원을 처리함
• <a> 및 id="#hash" 요소 마크업을 사용한 스크린 리더 지원
• prefers-reduced-motion: 크로스페이드 전환 및 인스턴트 사용 설정 인페이지 스크롤
• 동적으로 밑줄을 긋고 표시하기 위한 초안 @scroll-timeline 웹 기능 색상 선택 탭 변경

HTML

기본적으로 여기서 UX는 링크를 클릭하고 URL이 중첩된 브라우저가 일치하는 요소가 있는지 확인합니다.

여기에는 구조적 콘텐츠 멤버(링크 및 :target)가 있습니다. <nav>에 유용한 링크 목록과 <article> 목록이 필요합니다. 요소들로 구성되어 있으며 <section>이 적합합니다. 각 링크 해시는 섹션, 브라우저에서 앵커링을 통해 스크롤하게 합니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 링크 버튼을 클릭하여 포커스가 맞춰진 콘텐츠로 슬라이드

예를 들어 링크를 클릭하면 자동으로 :target Chrome 89에서는 JavaScript가 필요하지 않습니다. 그런 다음 사용자는 입력 장치를 연결시키는 것이죠. 이는 마크업

저는 다음 마크업을 사용하여 탭을 구성했습니다.

<snap-tabs>
  <header>
    <nav>
      <a></a>
      <a></a>
      <a></a>
      <a></a>
    </nav>
  </header>
  <section>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
  </section>
</snap-tabs>

<a> 요소와 <article> 요소 간의 연결을 설정할 수 있습니다. href 및 id 속성은 다음과 같습니다.

<snap-tabs>
  <header>
    <nav>
      <a href="#responsive"></a>
      <a href="#accessible"></a>
      <a href="#overscroll"></a>
      <a href="#more"></a>
    </nav>
  </header>
  <section>
    <article id="responsive"></article>
    <article id="accessible"></article>
    <article id="overscroll"></article>
    <article id="more"></article>
  </section>
</snap-tabs>

다음으로 기사를 여러 가지 재료로 채웠고, 링크는 여러 길이와 이미지가 혼합된 제목 작업할 콘텐츠로 있습니다.

스크롤 레이아웃

이 구성요소에는 세 가지 유형의 스크롤 영역이 있습니다.

• 탐색 메뉴(분홍색)가 가로 방향임 스크롤 가능
• 콘텐츠 영역(파란색)은 가로로 놓여 있습니다. 스크롤 가능
• 각 기사 항목(녹색)이 세로형임 있습니다.

스크롤과 관련된 요소에는 다음 두 가지 유형이 있습니다.

1. 창
   정의된 크기가 있는 상자로, overflow 속성 스타일입니다.
2. 대형 표면
   이 레이아웃에서는 컨테이너 목록인 nav입니다. 링크, 섹션 기사, 기사 콘텐츠 등이 있습니다

<snap-tabs> 레이아웃

선택한 최상위 레이아웃은 플렉스 (Flexbox)였습니다. 방향을 다음과 같이 설정해 놨어 column: 헤더와 섹션이 세로로 정렬됩니다. 이번이 처음입니다. 오버플로가 숨겨진 모든 항목을 숨깁니다. 헤더 및 섹션에서는 곧 개별 영역처럼 오버스크롤을 사용하게 됩니다.

HTML

<snap-tabs>
  <header></header>
  <section></section>
</snap-tabs>

CSS

  snap-tabs {
  display: flex;
  flex-direction: column;

  /* establish primary containing box */
  overflow: hidden;
  position: relative;

  & > section {
    /* be pushy about consuming all space */
    block-size: 100%;
  }

  & > header {
    /* defend against 
 needing 100% */
    flex-shrink: 0;
    /* fixes cross browser quarks */
    min-block-size: fit-content;
  }
}

다채로운 색상의 3스크롤 다이어그램을 다시 가리킵니다.

• 이제 <header>가 (분홍색)이 될 준비가 되었습니다. 스크롤 컨테이너를 실행합니다.
• <section>는 (파란색) 스크롤이 될 준비가 됨 있습니다

아래에 강조 표시한 프레임은 VisBug는 Google에서 윈도우의 창을 살펴보겠습니다.

탭 <header> 레이아웃

다음 레이아웃은 거의 동일합니다. Flex를 사용하여 세로 순서를 만듭니다.

HTML

<snap-tabs>
  <header>
    <nav></nav>
    <span class="snap-indicator"></span>
  </header>
  <section></section>
</snap-tabs>

CSS

header {
  display: flex;
  flex-direction: column;
}

.snap-indicator는 링크 그룹과 함께 가로로 이동해야 합니다. 이 헤더 레이아웃이 이러한 단계를 설정하는 데 도움이 됩니다. 여기에는 절대로 배치된 요소가 없습니다.

다음은 스크롤 스타일입니다. 스크롤 스타일을 공유하면 두 개의 가로 스크롤 영역 (헤더와 섹션) 사이에 배치하여 유틸리티를 클래스, .scroll-snap-x.

.scroll-snap-x {
  /* browser decide if x is ok to scroll and show bars on, y hidden */
  overflow: auto hidden;
  /* prevent scroll chaining on x scroll */
  overscroll-behavior-x: contain;
  /* scrolling should snap children on x */
  scroll-snap-type: x mandatory;

  @media (hover: none) {
    scrollbar-width: none;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }
}

각각 X축에 오버플로가 필요합니다. 오버스크롤을 트랩하기 위한 스크롤 포함, 숨김 터치 기기의 경우 스크롤바, 콘텐츠 잠금용 마지막 스크롤 스냅 표시됩니다. 키보드 탭 순서에 액세스할 수 있으며 모든 상호작용 가이드가 지원됩니다. 할 수 있습니다. 스크롤 스냅 컨테이너도 멋진 캐러셀 스타일을 얻습니다. 할 수 있습니다.

탭 헤더 <nav> 레이아웃

탐색 링크는 줄바꿈 없이 세로로 한 줄로 배치되어야 합니다. 각 링크 항목은 스크롤-스냅 컨테이너에 맞춰야 합니다. Swift 2021 CSS에 적합

HTML

<nav>
  <a></a>
  <a></a>
  <a></a>
  <a></a>
</nav>

CSS

  nav {
  display: flex;

  & a {
    scroll-snap-align: start;

    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }
}

각 링크 스타일과 크기 자체가 있으므로 탐색 레이아웃에서는 설계하는 것이 중요합니다. 탐색 항목의 고유한 너비로 탭 간 전환 표시기가 새 목표에 맞게 너비를 조정하는 것이 좋습니다. 얼마나 많은 사람이 요소가 여기에 있다면 브라우저에서 스크롤바를 렌더링하거나 렌더링하지 않을 것입니다.

탭 <section> 레이아웃

이 섹션은 유연한 항목이며 공간의 주요 소비자여야 합니다. 그것은 또한 기사를 배치할 열을 만들어야 합니다. 다시 말씀드리지만 신속하면서도 CSS 2021에서 사용 가능! block-size: 100%는 이 요소를 확장하여 가능한 한 상위 요소일 가능성이 가장 크면 자체 레이아웃에 대해 일련의 상위 열의 너비인 100%인 열을 반환합니다. 여기에서 비율을 사용하는 것이 좋습니다. 상위 요소에 강력한 제약 조건을 작성했기 때문입니다.

HTML

<section>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
</section>

CSS

  section {
  block-size: 100%;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
}

마치 '최대한 세로로 강압적으로 확장'하라고 말하는 것과 같습니다. flex-shrink: 0로 설정한 헤더를 기억하세요. 펼치기 푸시)는 전체 높이 열 집합의 행 높이를 설정합니다. 이 auto-flow 스타일은 그리드에 항상 하위 요소를 가로로 배치하도록 지시합니다. 줄바꿈 없이 원하는 대로 상위 창을 오버플로할 수 있습니다.

진짜 머릿속을 빙글빙글 그리는 것 같아! 이 섹션 요소는 상자 세트도 만들었습니다. 영상과 작업실에서 설명이 도움이 됩니다.

탭 <article> 레이아웃

사용자는 기사 콘텐츠를 스크롤할 수 있어야 하고 스크롤바는 기사 콘텐츠를 스크롤할 수 있어야 합니다. 오버플로가 있는 경우에만 표시됩니다. 이러한 기사 엘리먼트는 있습니다. 동시에 스크롤 상위 요소이자 스크롤 하위 요소입니다. 이 브라우저는 까다로운 터치, 마우스, 키보드 상호작용을 실제로 처리하고 있습니다. 설명하겠습니다

HTML

<article>
  <h2></h2>
  <p></p>
  <p></p>
  <h2></h2>
  <p></p>
  <p></p>
  ...
</article>

CSS

article {
  scroll-snap-align: start;

  overflow-y: auto;
  overscroll-behavior-y: contain;
}

상위 스크롤러 내에서 기사를 맞추도록 선택했습니다. 정말 좋아 탐색 링크 항목과 기사 요소가 인라인 시작에 맞춰지는 방식 각 스크롤 컨테이너의 조화로운 느낌을 주는 관계입니다.

기사가 그리드 하위 요소이며 크기가 표시 영역으로 미리 정해져 있음 스크롤 UX를 제공하려는 영역입니다. 즉, 높이나 너비는 필요하지 않습니다. 오버플로되는 방식을 정의하기만 하면 됩니다. overflow-y를 auto로 설정합니다 그런 다음 편리한 오버스크롤 동작으로 스크롤 상호작용을 트랩합니다. 속성

스크롤 영역 3개 요약

아래 시스템 설정에서 '스크롤바 항상 표시'를 선택했습니다. 내 생각에는 이 설정이 켜져 있을 때 레이아웃이 작동하는 것이 이중으로 중요합니다. 왜냐하면 레이아웃과 스크롤 오케스트레이션을 검토하기 위한 것입니다.

이 구성 요소의 스크롤바 여백을 보면 화면과 스크롤 영역의 상호작용 방식을 서로 연결됩니다. 이러한 각 스크롤 창 프레임이 어떻게 유연하거나 그리드 상위 요소를 레이아웃에 추가합니다.

DevTools를 사용하면 이를 시각화할 수 있습니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 앵커 요소로 가득한 Flexbox 탐색 요소 레이아웃을 보여주는 Chromium Devtools 기사 요소로 가득 찬 그리드 섹션 레이아웃 요소(단락으로 가득 찬 요소와 제목 요소)가 있습니다.

맞추기, 딥 링크 가능, 키보드 등 스크롤 레이아웃이 완전합니다. 있습니다. UX 개선, 스타일, 즐거움을 위한 강력한 기반

주요 기능

스크롤된 하위 요소는 크기를 조절하는 동안 고정된 위치를 유지합니다. 다시 말해 JavaScript는 기기를 회전하거나 브라우저를 표시할 때 아무것도 표시할 필요가 없습니다. 있습니다. Chromium DevTools 기기에서 사용해 보기 모드 기준 반응형이 아닌 모드를 선택한 다음 기기 프레임의 크기를 조절합니다. 요소가 뷰에 유지되며 콘텐츠와 함께 잠깁니다. 지금까지 Chromium이 사양과 일치하도록 구현을 업데이트했기 때문에 사용 가능합니다 그 내용은 다음과 같습니다. 관련 블로그 게시물을 참조하세요.

애니메이션

여기서 애니메이션 작업의 목표는 UI와의 상호작용을 명확하게 연결하는 것입니다. 의견을 보냅니다. 이렇게 하면 사용자를 모든 콘텐츠를 원활하게 검색할 수 있습니다 목적에 맞는 모션을 추가하고 지정할 수 있습니다 이제 사용자는 자신의 모션을 직접 지정할 수 있습니다. 운영체제의 환경설정을 그리고 저는 제 인터페이스를 통해 그들의 선호도에 응답하는 것을 매우 즐깁니다.

탭 밑줄을 기사 스크롤 위치와 연결합니다. 맞추기 꽤 정렬되지만 애니메이션의 시작과 끝을 고정합니다. 이렇게 하면 <nav>은 콘텐츠에 연결된 미니 지도. CSS와 JS에서 모두 사용자의 모션 환경설정을 확인합니다. 이 배려하기 좋은 곳이 몇 군데 있지!

스크롤 동작

:target 및 element.scrollIntoView() 기본적으로 즉시 생성됩니다. 브라우저는 단순히 스크롤 위치 스크롤 위치로 전환하려면 어떻게 해야 할까요? '깜박임'을 클릭합니다.

@media (prefers-reduced-motion: no-preference) {
  .scroll-snap-x {
    scroll-behavior: smooth;
  }
}

여기서는 모션을 도입하고 사용자가 제어하지 않는 모션을 도입했으므로 (예: 스크롤), 사용자가 선호하는 항목이 없는 경우에만 이 스타일을 적용합니다. 운영 체제를 구동하는 시스템입니다. 이렇게 하면 스크롤해야만 괜찮은 사람들을 위한 모션을 보여드리겠습니다.

탭 표시기

이 애니메이션의 목적은 표시기를 상태와 연결하는 것입니다. 있습니다. 사용자를 위해 border-bottom 스타일의 색상을 크로스페이드하기로 했습니다. 모션 감소 및 슬라이딩 및 색상 페이드 애니메이션과 연결된 스크롤 모드를 선호하는 사용자 을 사용하세요.

Chromium Devtools에서 환경설정을 전환하고 두 가지 옵션을 시연할 수 있습니다. 사용할 수 있습니다. 이걸 만드는 게 정말 재미있었어요.

@media (prefers-reduced-motion: reduce) {
  snap-tabs > header a {
    border-block-end: var(--indicator-size) solid hsl(var(--accent) / 0%);
    transition: color .7s ease, border-color .5s ease;

    &:is(:target,:active,[active]) {
      color: var(--text-active-color);
      border-block-end-color: hsl(var(--accent));
    }
  }

  snap-tabs .snap-indicator {
    visibility: hidden;
  }
}

사용자가 모션 감소를 선호하지 않으면 .snap-indicator를 숨깁니다. 필요하지 않습니다. 그런 다음 border-block-end 스타일로 바꾸고 transition 또한 탭 상호작용에서 활성 탐색 항목은 브랜드 밑줄 하이라이트만 있고 텍스트 색상도 더 어둡습니다. 이 활성 요소의 텍스트 색상 대비가 높고 밝은 언더라이트 강조가 있습니다.

CSS를 몇 줄만 추가하면 사람들에게 노출된다는 느낌을 줄 수 있습니다. 사용자의 모션 선호도를 신중하게 고려합니다.) 마음에 들어요.

@scroll-timeline

위 섹션에서는 감소된 모션 크로스페이드를 처리하는 방법을 보여드렸습니다. 이 섹션에서는 표시기와 함께 스크롤하면 됩니다. 다음에는 재미있고 실험적인 주제를 살펴보겠습니다. 당신이 기대가 된 것 같네요.

const { matches:motionOK } = window.matchMedia(
  '(prefers-reduced-motion: no-preference)'
);

먼저 JavaScript에서 사용자의 모션 환경설정을 확인합니다. 만약 false입니다. 즉, 사용자가 감소된 움직임을 선호한다면 어떤 동작도 실행하지 않습니다. 스크롤 링크 모션 효과가 포함되어 있습니다.

if (motionOK) {
  // motion based animation code
}

이 글을 작성하는 시점을 기준으로 브라우저에서 @scroll-timeline가 없음 이것은 초안 사양만 있는 실험적인 구현을 제공합니다. 하지만 폴리필이 있어서 데모를 들을 수 있습니다.

ScrollTimeline

CSS와 JavaScript 모두 스크롤 타임라인을 만들 수 있기는 하지만 저는 JavaScript에 추가되었기 때문에 애니메이션에서 실시간 요소 측정을 사용할 수 있습니다.

const sectionScrollTimeline = new ScrollTimeline({
  scrollSource: tabsection,  // snap-tabs > section
  orientation: 'inline',     // scroll in the direction letters flow
  fill: 'both',              // bi-directional linking
});

한 항목이 다른 항목의 스크롤 위치를 따라가기를 원하고 ScrollTimeline 스크롤 링크의 드라이버 scrollSource를 정의합니다. 일반적으로 웹의 애니메이션은 전역 시간 프레임에 따라 실행되지만 메모리에 맞춤 sectionScrollTimeline를 추가하면 이 모든 것을 변경할 수 있습니다.

tabindicator.animate({
    transform: ...,
    width: ...,
  }, {
    duration: 1000,
    fill: 'both',
    timeline: sectionScrollTimeline,
  }
);

애니메이션의 키프레임에 들어가기 전에 먼저 스크롤의 팔로어인 tabindicator가 애니메이션 처리됨을 가리킵니다. 섹션의 스크롤을 볼 수 있습니다. 이렇게 하면 연결이 완료되지만 스테이트풀(Stateful) 지점, 애니메이션 처리(스테이트풀(Stateful) 포인트라고도 함) 맞춤설정할 수 있습니다.

동적 키프레임

애니메이션 처리에는 아주 강력하고 순수한 선언적 CSS 방법이 있습니다. @scroll-timeline 하지만 선택한 애니메이션이 너무 역동적입니다. 없음 auto 너비 간에 전환하는 방법이고 동적으로 만들 수 있는 방법이 없음 하위 요소 길이에 따라 여러 키프레임을 지정할 수 있습니다.

JavaScript는 이 정보를 얻는 방법을 알고 있으므로 하위 요소를 직접 가져와서 런타임에 계산된 값을 가져옵니다.

tabindicator.animate({
    transform: [...tabnavitems].map(({offsetLeft}) =>
      `translateX(${offsetLeft}px)`),
    width: [...tabnavitems].map(({offsetWidth}) =>
      `${offsetWidth}px`)
  }, {
    duration: 1000,
    fill: 'both',
    timeline: sectionScrollTimeline,
  }
);

각 tabnavitem의 offsetLeft 위치를 디스트럭처링하고 문자열을 반환합니다. 이 함수는 값을 translateX 값으로 사용합니다. 그러면 이미지에 대한 4개의 변환 키프레임이 애니메이션을 적용할 수 있습니다. 너비도 마찬가지입니다. 각각 동적 너비가 무엇인지 질문합니다. 키프레임 값으로 사용됩니다.

다음은 글꼴 및 브라우저 환경설정에 따른 출력 예입니다.

TranslateX 키프레임:

[...tabnavitems].map(({offsetLeft}) =>
  `translateX(${offsetLeft}px)`)

// results in 4 array items, which represent 4 keyframe states
// ["translateX(0px)", "translateX(121px)", "translateX(238px)", "translateX(464px)"]

너비 키프레임:

[...tabnavitems].map(({offsetWidth}) =>
  `${offsetWidth}px`)

// results in 4 array items, which represent 4 keyframe states
// ["121px", "117px", "226px", "67px"]

전략을 요약하기 위해 이제 탭 표시기가 4개의 키프레임에 걸쳐 애니메이션 처리됩니다. 섹션 스크롤러의 스크롤 스냅 위치에 따라 달라집니다. 스냅 포인트 키프레임을 명확하게 구분해서 보여주면서 동기화한 느낌을 줍니다.

사용자는 너비와 높이를 확인하여 상호작용을 통해 애니메이션을 구동합니다. 표시기의 위치가 다음 섹션으로 넘어가면서 완벽하게 할 수 있습니다.

눈치채지 못했을 수도 있지만, 저는 YouTube 심포니 오케스트라의 탐색 항목이 선택됩니다.

선택되지 않은 밝은 회색이 강조표시되면 대비가 더 높습니다. 일반적으로 텍스트의 전환 색상(예: 마우스 오버) 스크롤할 때 색상을 전환하는 것이 다음 수준이며, 밑줄 표시기와 동기화됩니다.

방법은 다음과 같습니다.

tabnavitems.forEach(navitem => {
  navitem.animate({
      color: [...tabnavitems].map(item =>
        item === navitem
          ? `var(--text-active-color)`
          : `var(--text-color)`)
    }, {
      duration: 1000,
      fill: 'both',
      timeline: sectionScrollTimeline,
    }
  );
});

각 탭 탐색 링크에는 새로운 색상 애니메이션이 필요하며 동일한 스크롤을 추적합니다. 밑줄 표시기로 표시됩니다. 이전과 동일한 타임라인을 사용합니다. 스크롤 시 틱을 내보내는 역할을 하는데요, 이 틱을 모든 유형의 만들 수 있습니다. 이전과 마찬가지로 루프에 4개의 키프레임을 생성하고 있습니다.

[...tabnavitems].map(item =>
  item === navitem
    ? `var(--text-active-color)`
    : `var(--text-color)`)

// results in 4 array items, which represent 4 keyframe states
// [
  "var(--text-active-color)",
  "var(--text-color)",
  "var(--text-color)",
  "var(--text-color)",
]

var(--text-active-color) 색상의 키프레임에서는 링크가 강조표시됩니다. 나머지는 표준 텍스트 색상입니다. 중첩 루프는 외부 루프가 각 탐색 항목이고 내부 루프가 각각 navitem의 개인 키프레임에 해당합니다. 외부 루프 요소가 다음과 같은지 확인합니다. 이를 사용하여 언제 선택되었는지 알 수 있습니다.

이 글을 작성하는 게 즐거웠습니다. 최고죠.

더욱 향상된 JavaScript 기능

제가 여기서 보여드린 내용의 핵심은 다른 장치 없이도 있습니다. 이제 JavaScript가 JavaScript를 사용할 때 어떻게 향상할 수 있는지 있습니다.

딥 링크

딥 링크는 모바일 용어에 가깝지만 딥 링크의 의도는 탭 콘텐츠에 대한 URL을 직접 공유할 수 있는 탭이 있습니다. 이 브라우저가 URL 해시와 일치하는 ID로 인페이지로 이동합니다. 찾았어 이 onload 핸들러는 여러 플랫폼에 영향을 미쳤습니다.

window.onload = () => {
  if (location.hash) {
    tabsection.scrollLeft = document
      .querySelector(location.hash)
      .offsetLeft;
  }
}

스크롤 종료 동기화

사용자들은 키보드로 클릭하거나 키보드로 액세스하지는 않을 때가 있습니다. 할 수 있어야 합니다. 섹션 스크롤러가 중지되는 경우 상단 탐색 메뉴에서 일치해야 합니다.

스크롤 끝을 기다리는 방법은 다음과 같습니다. js tabsection.addEventListener('scroll', () => { clearTimeout(tabsection.scrollEndTimer); tabsection.scrollEndTimer = setTimeout(determineActiveTabSection, 100); });

섹션이 스크롤될 때마다 섹션 시간 초과가 있는 경우 삭제, 새로운 것을 시작합니다. 섹션 스크롤이 중지되면 시간 제한을 지우지 마세요. 100ms 후에 발사합니다. 실행되면 파악하려는 함수를 호출합니다. 확인할 수 있습니다

const determineActiveTabSection = () => {
  const i = tabsection.scrollLeft / tabsection.clientWidth;
  const matchingNavItem = tabnavitems[i];

  matchingNavItem && setActiveTab(matchingNavItem);
};

스크롤이 맞춰졌다고 가정하고 현재 스크롤 위치를 너비에서 나누기 십진수가 아닌 정수가 되어야 합니다. 그런 다음 이 계산된 색인을 통해 캐시에서 navitem을 가져오고 일치를 활성화하도록 보냅니다.

const setActiveTab = tabbtn => {
  tabnav
    .querySelector(':scope a[active]')
    .removeAttribute('active');

  tabbtn.setAttribute('active', '');
  tabbtn.scrollIntoView();
};

활성 탭을 설정하려면 먼저 현재 활성화된 탭을 지운 다음 수신 탐색 항목에 활성 상태 속성을 추가합니다. scrollIntoView() 호출 CSS와 재미있게 상호작용할 수 있습니다.

.scroll-snap-x {
  overflow: auto hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

가로 스크롤 맞추기 유틸리티 CSS에는 중첩되어 있다고 가정하겠습니다. 사용자가 모션을 허용하는 경우 smooth 스크롤. JavaScript는 호출을 사용하여 요소를 뷰로 스크롤하면 CSS는 UX를 선언적으로 관리할 수 있습니다. 아이들이 짝을 찾아주는 즐거운 게임이 벌어지기도 합니다.

결론

이제 내가 어떻게 했는지 알았으니 어떻게 하면 어떨까?! 재미를 더하는 게임 구성요소 아키텍처를 보여줍니다. 누가 첫 번째 버전을 만들며 선호하는 프레임워크는 무엇인가요? 🙂

접근방식을 다각화하고 웹에서 빌드하는 방법을 모두 알아보겠습니다. 글리치를 생성하고 트윗해 주세요. 해당 버전을 커뮤니티 리믹스에 추가하겠습니다. 섹션을 참조하세요.

커뮤니티 리믹스

• 웹 구성요소가 포함된 @devnook, @rob_dodson, @DasSurma: 기사.
• 버튼이 있는 @jhvanderschee: Codepen.