Sekmeler bileşeni oluşturma

iOS ve Android uygulamalarındakine benzer bir sekme bileşeninin nasıl oluşturulacağına dair temel bir genel bakış.

Adam Argyle

Bu gönderide, web için Sekmeler bileşeni oluşturma konusundaki düşüncenizi paylaşmak birden fazla cihaz girişini destekleyen ve farklı tarayıcılarda çalışan özelliklere sahiptir. Demoyu deneyin.

Demo

Video kullanmayı tercih ederseniz bu gönderinin YouTube versiyonunu kullanabilirsiniz:

Genel Bakış

Sekmeler, tasarım sistemlerinde yaygın olarak kullanılan bir bileşen olsa da pek çok şekilde ve farklı şekillerde oluşturabilirsiniz. İlk başta <frame> öğesi üzerine oluşturulan masaüstü sekmeleri vardı. Şimdi ise fizik özelliklerine dayalı içerik canlandıran tecrübeli mobil bileşenler. Hepsi aynı şeyi yapmaya çalışıyor: alandan tasarruf etmek.

Günümüzde sekmelerle ilgili kullanıcı deneyiminin temel unsurlarından biri, düğmelerle gezinme olanağı sunar. Bir görüntü çerçevesindeki içeriğin görünürlüğünü açıp kapatın. Birçok farklı içerik alanları aynı alanı paylaşır, ancak gezinme düğmesi seçilir.

Son 10 yılın sekme bileşeni web tasarımı stillerinden oluşan bir kolaj

Web Taktikleri

Genel olarak bu bileşenin yapılışını son derece basit buldum. bazı kritik web platformu özellikleri:

• Hassas kaydırma ve klavye etkileşimleri için scroll-snap-points uygun kaydırma durdurma konumları
• Şunun için URL karmaları üzerinden derin bağlantılar: tarayıcı işlenen sayfa içi kaydırma sabitleme ve paylaşım desteği
• <a> ve id="#hash" öğe işaretlemesiyle ekran okuyucu desteği
• Çapraz geçişleri ve anında geçişleri etkinleştirmek için prefers-reduced-motion sayfa içi kaydırma
• Dinamik olarak altını çizmek ve altını çizmek için kullanılan taslak @scroll-timeline web özelliği seçili sekme rengi değiştiriliyor

HTML

Buradaki kullanıcı deneyimi temel olarak şunlardır: Bir bağlantıyı tıklama, URL'nin iç içe yerleştirilmiş konumu temsil etmesini sağlama ve ardından tarayıcı ekranı kaydırarak içerik alanının güncellendiğini eşleşen öğedir.

Burada bağlantılar ve :target'ler gibi bazı yapısal içerik üyeleri bulunur. Biz <nav> için ideal olan bağlantıların listesine ve <article> gibi çeşitli öğeler için idealdir.<section> Her bağlantı karması bir bölümle eşleşir tarayıcının sabitleme yoluyla kaydırmasına izin verir.

Odaklanılmış içeriğin içinde kayan bir bağlantı düğmesi tıklanır

Örneğin, bir bağlantı tıklandığında :target makale otomatik olarak Chrome 89, JS gerekmez. Kullanıcı daha sonra makale içeriğini kaydırarak her zamanki gibi kullanmaya devam edebilir. Bu içerik, işaretleme.

Sekmeleri düzenlemek için aşağıdaki işaretlemeyi kullandım:

<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> ve <article> öğeleri arasında şununla bağlantı kurabilirim: href ve id özellikleri şöyle:

<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>

Ardından makaleleri karışık miktarda lorem ile, bağlantıları ise karışık uzunlukta ve resimli başlıklardan oluşan bir gruptur. Üzerinde çalışacağımız içerikle kullanır.

Kayan düzenler

Bu bileşende 3 farklı tür kaydırma alanı vardır:

• Gezinme menüsü (pembe) yatay olarak gösterilir kaydırılabilir
• İçerik alanı (mavi) yatay olarak gösterilir kaydırılabilir
• Her makale öğesi (yeşil) dikey olarak kaydırılabilir.

Kaydırmayla ilgili 2 farklı öğe türü vardır:

1. Pencere
   overflow öğesine sahip, tanımlanmış boyutları içeren bir kutu mülk stiline sahip olması gerekir.
2. Aşırı büyük yüzey
   Bu düzende liste kapsayıcıları kullanılır: gezinme ve makale içeriğini görebilirsiniz.

<snap-tabs> düzeni

Seçtiğim üst düzey düzen esnekti (Flexbox). Yönü şu şekilde ayarladım: column, yani başlık ve bölüm dikey olarak sıralanır. Bu ilk taşma penceresini gizleyerek her şeyi gizler. Başlık ve bölümünde, yakında, bağımsız alt bölgeler olarak fazla kaydırma devreye girecek.

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;
  }
}

İşaretçiyi tekrar gösteren renkli 3 kaydırmalı diyagrama getirin:

• <header> artık (pembe) olmaya hazır kaydırma kapsayıcısını kullanın.
• <section>, (mavi) kaydırma olmaya hazır emin olun.

Aşağıda vurguladığım kareler VisBug, bizi etkileyen pencereleri kaydırma kapsayıcıları oluşturuldu.

Sekmelerin <header> düzeni

Sonraki düzen neredeyse aynı: Dikey sıralama oluşturmak için esneki kullanıyorum.

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, bağlantı grubuyla yatay olarak hareket etmelidir ve bu başlık düzeni o aşamanın ayarlanmasına yardımcı olur. Burada mutlak konumlandırılmış öğe yok.

Sırada kaydırma stilleri var. Görünüşe göre kaydırma stillerini yalnızca iki yatay kaydırma alanımız (başlık ve bölüm) arasına girdim. Bu yüzden, sınıf, .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;
    }
  }
}

Her birinin x ekseninde taşması gerekir, fazla kaydırmayı yakalamak için kapsamayı kaydırın, gizli Dokunmatik cihazlar için kaydırma çubukları ve son olarak içeriği kilitlemek için kaydırma tutturma bazı sunum konuları var. Klavye sekme sıralamamıza erişilebilir ve etkileşimler kılavuzu odaklanmalıdır. Kaydırma tutturma kapsayıcıları da hoş bir atlı karınca stili elde ediyor etkileşime girmesini sağlar.

Sekme başlığının <nav> düzeni

Gezinme bağlantıları, satır sonu olmadan dikey olarak bir çizgi yerleştirilmelidir. ortalanmalı ve her bir bağlantı öğesi, kaydırma tutturma kapsayıcıya tutturulmalıdır. Swift 2021 CSS'si için çalışıyor!

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;
  }
}

Her bir bağlantı stilini ve boyutunu değiştirebilir, böylece gezinme düzeninin yalnızca akış yönü ve akışıdır. Gezinme öğelerindeki benzersiz genişlikler, sekmeler arasında geçişi sağlar eğlenceli hale getirir. Kaç adet bir kaydırma çubuğu oluşturursa tarayıcı bir kaydırma çubuğu oluşturur veya görünmez.

Sekmelerin <section> düzeni

Bu bölüm esnek bir öğedir ve alanın baskın tüketicisi olması gerekir. Google ayrıca makalelerin yerleştirileceği sütunlar da oluşturulması gerekir. Yine hızlı bir şekilde nasıl yardımcı olacağını öğreneceksiniz! block-size: 100%, bu öğeyi üst öğe oluşturmak isterse, kendi düzeni için bir dizi üst sütunun genişliğinde 100% olan sütunlar. Yüzdeler burada çok işe yarar çünkü üst öğe ile ilgili güçlü kısıtlamalar yazmış bulunuyoruz.

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%;
}

Örneğin, "ısrarcı bir şekilde dikey olarak mümkün olduğunca fazla genişlet" demek gibi (flex-shrink: 0 olarak ayarladığımız başlığı unutmayın: Bu, buna karşı bir savunmadır genişletme genişletmesi) içerir. İlgili içeriği oluşturmak için kullanılan auto-flow stili, ızgaraya alt öğeleri her zaman yatay olarak yerleştirmesini söylüyor satır, sarmalama yok, tam olarak istediğimiz şey; taşmasını sağlar.

Bu konuları bazen etrafa takmakta zorlanıyorum. Bu bölüm öğesi ancak aynı zamanda bir dizi kutu oluşturdu. Umarım görsel ve yardımcı olduğudur.

Sekmelerin <article> düzeni

Kullanıcı makale içeriğini kaydırabilmeli ve kaydırma çubukları yalnızca taşma durumunda görünür. Bu makale öğeleri derli toplu dokunun. Bunlar aynı anda hem kaydırma üst öğesi hem de kaydırma alt öğesidir. İlgili içeriği oluşturmak için kullanılan özellikle de hassas dokunma, fare ve klavye etkileşimleri gibi bizim için burada.

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;
}

Makalelerin üst kaydırma çubuğuna yerleştirilmesini tercih ettim. Çok beğendim gezinme bağlantısı öğelerinin ve makale öğelerinin satır içi başlangıcına nasıl tutturulduğu ilgili kaydırma kapsayıcılarını temsil eder. Uyumlu görünüyor ilişkilidir.

Makale, tablo alt öğesi ve boyutu, görüntü alanı olarak önceden belirlenmiş kaydırma deneyimi sunmak istediğimiz bir alan. Yani yükseklik veya genişliğe ihtiyacım yok. stillerini buraya ekliyorum. Sadece nasıl taştığını tanımlamam gerekiyor. overflow-y'yi otomatik olarak ayarlıyorum, ve daha sonra, kaydırma etkileşimlerini kullanışlı aşırı kaydırma davranışıyla yakalamayı

3 kaydırma alanı özeti

Aşağıda, sistem ayarlarımda "Kaydırma çubuklarını her zaman göster" seçeneğini belirledim. sanırım bu ayar açıkken, sayfa düzeninin açık olması da düzeni ve kaydırma düzenlemesini incelemek istiyorum.

Bence bu bileşende kaydırma çubuğu oluğunu görmek, sürecin nasıl hareket ettiklerini, destekledikleri yönü ve bir iletişim kurmaktır. Bu kaydırma penceresi çerçevelerinin her birinin aynı zamanda esnek bir düzene taşıyabilirsiniz.

Geliştirici Araçları bunu görselleştirmemize yardımcı olabilir:

Sabit öğelerle dolu flexbox gezinme öğesi düzenini gösteren Chromium Geliştirici Araçları, makale öğeleriyle dolu tablo bölümü düzeni ve paragraflar ve bir başlık öğesi dolu öğeler içerir.

Kaydırma düzenleri eksiksizdir: tutturma, derin bağlantı ve klavye erişilebilir. Kullanıcı deneyimi geliştirmeleri, stil ve eğlence için güçlü bir temel.

Öne çıkan özellik

Kaydırma tutturan alt öğeler, yeniden boyutlandırma sırasında kilitli konumlarını korur. Bunun anlamı şudur: JavaScript'in, cihaz rotasyonunda veya tarayıcıda herhangi bir şeyi görünüme getirmesi gerekmez yeniden boyutlandır'a dokunun. Chromium Geliştirici Araçları'nda deneyin Cihaz Mod Duyarlı dışında bir mod seçip cihaz çerçevesini yeniden boyutlandırın. Öğenin görünümde kaldığına ve içeriğiyle kilitlendiğine dikkat edin. Bu oldu Chromium'un uygulamalarını spesifikasyonla eşleşecek şekilde güncellemesinden bu yana kullanılabilir. İşte blog yayınımızı da takip edebilirsiniz.

Animasyon

Buradaki animasyonun amacı, kullanıcı arayüzü ile etkileşimleri açık bir şekilde bağlamaktır. geri bildirim. Bu, kullanıcının ( sorunsuz bir şekilde keşfedilebilir. Belirli bir amaç doğrultusunda hareket ekliyorum şartlı olarak. Kullanıcılar artık hareketlerini belirleyebilir tercih ettiklerine emin olabilirsiniz. ve arayüzlerimde tercihlerine cevap vermekten keyif alıyorum.

Makale kaydırma konumunun altında bir sekmenin altını çizeceğim. Yapıştırma, bir animasyonun başlangıcını ve sonunu sabitlerseniz bunu yapabilirsiniz. Bu, bir depolama alanı gibi çalışan <nav> mini harita üzerinde görünür. Kullanıcının hareket tercihini hem CSS hem de JS'den kontrol edeceğiz. Bir üzerinde düşünülecek birkaç harika yer var!

Kaydırma davranışı

Hem :target hem de mobil cihazların hareket davranışını iyileştirme fırsatı vardır. element.scrollIntoView(). Varsayılan olarak anında kullanılır. Tarayıcı yalnızca kaydırma konumu. Peki, bu kaydırma konumuna geçiş yapmak gözlerle yumruk atmak mı istiyor?

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

Burada hareketi ve kullanıcının kontrol etmediği hareketi (kaydırma gibi), bu stili yalnızca kullanıcının hareket ettirmeyi her şeyden fazla teşvik eder. Böylece hem kaydırma hem de anlaşabileceklerini anlattı.

Sekme göstergesi

Bu animasyonun amacı, göstergeyi durum ile ilişkilendirmeye daha ayrıntılı şekilde ele alacağız. Kullanıcılar için border-bottom stillerinde çapraz geçiş yapmaya karar verdim daha az hareketi ve kaydırma bağlantılı kayma + renk solması animasyonu normal kullanıcılar için de uygundur.

Chromium Geliştirici Araçları'nda tercihi açıp 2 farklı geçiş stilleri. Bunu yaparken çok eğlendim.

@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;
  }
}

Kullanıcı azaltılmış hareketi tercih etmediğinde .snap-indicator öğesini gizlerim. ihtiyaç duymazsınız. Daha sonra, bunu border-block-end stil ve transition. Ayrıca, sekme etkileşiminde, etkin gezinme öğesinin yalnızca markanın alt çizgisi vurgusu var, ancak metin rengi de daha koyu. İlgili içeriği oluşturmak için kullanılan etkin öğe daha yüksek metin rengi kontrastına ve parlak arka plan vurgusuna sahiptir.

Sadece birkaç satır daha CSS, insanların fark edildiklerini hissetmelerini sağlar. hareket tercihlerine titizlikle saygı gösteriyoruz). Bunu sevdim.

@scroll-timeline

Yukarıdaki bölümde, azaltılmış hareket geçişini nasıl ele aldığımı gösterdim stillerine bakalım. Bu bölümde, gösterge ile bir şablonu nasıl bağladığımı bir arada kullanabilirsiniz. Şimdi de deneysel bir çalışmadan bahsedeceğiz. Umarım siz benim kadar heyecanlıydı.

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

İlk olarak kullanıcının hareket tercihini JavaScript'ten kontrol ediyorum. Eğer Bu false. Kullanıcı daha az hareket etmeyi tercih ederse etraflıca hiç reklam göstermeyiz. birkaç hareketli öğe vardır.

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

Bu metni yazarken, tarayıcının desteklediği @scroll-timeline bir değer değil. Bu bir yalnızca taslak spesifikasyonu deneysel uygulamalar. Yine de, burada kullandığım bir çoklu dolgusu var. demomuz var.

ScrollTimeline

Hem CSS hem de JavaScript kaydırma zaman çizelgeleri oluşturabilse de Animasyonda canlı öğe ölçümlerini kullanabilmek için JavaScript.

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

1 şeyin başka bir kişinin kaydırma konumunu izlemesini istiyorum ve ScrollTimeline Kaydırma bağlantısının sürücüsünü, scrollSource olarak tanımlıyorum. Normalde web'deki bir animasyon, genel bir zaman aralığı işaretine göre yayınlanır ancak bellekte özel bir sectionScrollTimeline, tüm bunları değiştirebilirim.

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

Animasyonun animasyon karelerine girmeden önce kaydırmanın takipçisine (tabindicator) göre animasyon uygulanır özel bir zaman çizelgesinde, bölümünüzün kaydırılması. Bu işlem, bağlantıyı tamamlar ancak son bileşen, animasyonlar için durum bilgili noktalar eksik animasyon kareleri.

Dinamik animasyon kareleri

CSS'lerle canlandırmanın gerçekten çok güçlü, sadece bildirim temelli @scroll-timeline, ancak seçtiğim animasyon çok dinamikti. Yok genişliği arasında geçiş yapmak için auto yöntem vardır ve dinamik olarak çocukların uzunluğuna bağlı olarak birkaç animasyon karesi gösterilir.

JavaScript bu bilgiyi nasıl alacağını bilir, o yüzden tekrar tekrar çalışma zamanında hesaplanan değerleri toplayabiliriz:

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

Her tabnavitem için offsetLeft konumunu yapılandırın ve bir dize döndürün bunu translateX değeri olarak kullanan bir öğedir. Bu şekilde her saniye için 4 dönüşüm animasyon karesi animasyon ekler. Aynı şey genişlik için de geçerlidir, her birine dinamik genişliğinin ne olduğu sorulur sonra animasyon karesi değeri olarak kullanılır.

Yazı tiplerime ve tarayıcı tercihlerime dayanan şu örnek çıkışı burada bulabilirsiniz:

TranslationX Animasyon Kareleri:

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

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

Genişlik Animasyon Kareleri:

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

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

Stratejiyi özetlemek gerekirse sekme göstergesi artık 4 animasyon karesinde animasyon olarak gösterilir. değişiklik gösterebilir. Tutturma noktaları animasyon karelerimiz arasında net bir tanımlama oluşturur ve senkronize edilmiş hissi verir.

Kullanıcı, etkileşimiyle birlikte animasyonu tamamlar, göstergenin konumu bir bölümden diğerine geçiyorsa, izleme, mükemmel hale getirir.

Fark etmemiş olabilirsin, ama ben rengin bir insan olarak vurgulanan gezinme öğesi seçilir.

Seçili olmayan açık gri, vurgulandığında daha da geriye itilmiş görünür öğesinin kontrastı daha yüksek. Fareyle üzerine gelindiğinde yapılan gibi metinlerin rengi genellikle değiştirilir seçildiğinde, kaydırma sırasında bu rengin geçişini altı çizili göstergesiyle senkronize edilmiştir.

Bunu şu şekilde yaptım:

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

Her sekme gezinme bağlantısı için bu yeni renkli animasyonun gerekli olduğu ve aynı kaydırmanın izlendiği zaman çizelgesinde alt çizgi göstergesi olarak görünür. Öncekiyle aynı zaman çizelgesini kullanıyorum: kaydırma sırasında onay işareti koymaktır. Bu onay işaretini istediğimiz bir animasyon. Daha önce yaptığım gibi döngüde 4 animasyon karesi oluşturuyor ve renk.

[...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) renkli animasyon karesi bağlantıyı vurgular ve aksi takdirde standart bir metin rengi olur. Buradaki iç içe geçmiş döngü, işlemi nispeten daha dış döngü her bir gezinme öğesi, iç döngü de her bir navitem'in kişisel animasyon karelerine ekleyin. Dış döngü elemanının İç döngüde birincisini seçin ve ne zaman seçildiğini öğrenmek için bunu kullanın.

Bunu yazarken çok eğlendim. Evet.

Daha da fazla JavaScript geliştirmesi

Size burada gösterdiğim temel şeyin, özellikle de JavaScript'e dokunun. Bununla birlikte, JS konusunun daha iyi anlaşılması için kullanılabilir.

Derin bağlantılar

Derin bağlantılar daha çok mobil bir terim ama bence derin bağlantının amacı URL'yi doğrudan bir sekmenin içeriğine yerleştirebileceğiniz sekmelerle burada bulabilirsiniz. İlgili içeriği oluşturmak için kullanılan tarayıcı, sayfa içi URL karmasında eşleşen kimliğe gider. buldum bu onload işleyici, platformlar genelinde etkili oldu.

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

Kaydırma ve senkronizasyon sonu

Kullanıcılarımız her zaman klavyeyi tıklamıyor veya klavye kullanmıyor, tam olarak bunu yapabiliyorlar. Bölüm kaydırma çubuğu durduğunda olması gereken yerde üst gezinme çubuğunda eşleştirilmesi gerekir.

Kaydırmanın sona ermesini beklediğim gibi: js tabsection.addEventListener('scroll', () => { clearTimeout(tabsection.scrollEndTimer); tabsection.scrollEndTimer = setTimeout(determineActiveTabSection, 100); });.

Bölümler kaydırılırken aşağıdaki durumlarda bölüm zaman aşımını temizleyin ve yeni bir tane başlatın. Bölümlerin kaydırılması durduğunda zaman aşımını temizlemeyin, ve dinlenmeden 100 ms sonra etkinleşir. Bu komut tetiklendiğinde, nerede durduğunu görebilir.

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

  matchingNavItem && setActiveTab(matchingNavItem);
};

Kaydırmanın tutturulduğunu varsayarak geçerli kaydırma konumunu genişlikten ayırın ondalık sayı değil, tam sayı olmalıdır. Ben de bu hesaplanan dizin aracılığıyla önbelleğimizden bir navitem alın ve eşleşmeyi etkin olarak ayarlayacağım.

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

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

Etkin sekmeyi ayarlamak için o anda etkin olan sekmeleri temizledikten sonra gelen gezinme öğesi etkin durum özelliğine. scrollIntoView() çağrısı CSS ile eğlenceli bir etkileşimi var. Bu, dikkate değer.

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

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

Yatay kaydırma tutturma yardımcı programı CSS'sinde iç içe yerleştirme Kullanıcı harekete duyarlıysa smooth kaydırılabilir. JavaScript açık bir şekilde çağrılarını ekrana getirir ve CSS, kullanıcı deneyimini bildirimli bir şekilde yönetebilir. Bazen çok lezzetli bir o kadar da keyifli bir eşleşme.

Sonuç

Şimdi bunu nasıl yaptığımı biliyorsun, şimdi nasıl yaparsın? Bu, projeyle ilgili bileşenlerine ayıralım. İlk sürümü kim, çerçevenizi seçin. 🙂

Gelin, yaklaşımlarımızı çeşitlendirelim ve web'de içerik geliştirmenin tüm yollarını öğrenelim. Sorun oluştur ve beni tweetle ve ben de bunu Topluluk remikslerine ekleyeceğim. bölümüne bakın.

Topluluk remiksleri

• @devnook, @rob_dodson ve @DasSurma (Web Bileşenleri ile): article.
• @jhvanderschee düğmeleri ile: Codepen.