0Pricing
CSS Academy · Ders

scroll-behavior: smooth

scroll-behavior ile bağlantı bağlantıları ve programatik kaydırmalar için yumuşak kaydırmayı etkinleştirin.

scroll-behavior: smooth, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

scroll-behavior Nedir?

scroll-behavior, gezinme tarafından tetiklenen kaydırmanın (çapa bağlantıları, JavaScript scrollTo()) yumuşak bir animasyonla mı gerçekleşeceğini, yoksa anında mı atlanacağını denetler.

scroll-behavior: smooth

scroll-behavior: smooth ayarını html veya body öğesine vermek, tüm sayfa içi çapa bağlantısı gezinmelerini yumuşak bir şekilde canlandırır:

  <p>Scrolling on this page is smooth thanks to <code>html { scroll-behavior: smooth; }</code>.</p>

Anında ve Yumuşak Kaydırma

Değerler:

  • auto (varsayılan): anında atlama
  • smooth: hedefe doğru canlandırılmış kaydırma

Çapa Bağlantılarında Gezinme

Yumuşak kaydırma etkinleştirildiğinde, <a href="#contact"> gibi bir bağlantıya tıklamak anında atlamak yerine id="contact" değerine sahip öğeye yumuşak bir şekilde kaydırır.

  <nav>
    <a href="#about">About</a>
    <a href="#work">Work</a>
    <a href="#contact">Contact</a>
  </nav>
  <section id="about"><h3>About</h3></section>
  <section id="work"><h3>Work</h3></section>
  <section id="contact"><h3>Contact</h3></section>

JavaScript ile Yumuşak scrollTo()

Canlandırılmış kaydırma için JavaScript kaydırma yöntemlerine behavior: "smooth" değerini aktarın:

  <pre class="snippet">window.scrollTo({ top: 0, behavior: 'smooth' });

document.querySelector('#section').scrollIntoView({
  behavior: 'smooth',
  block: 'start'
});</pre>

prefers-reduced-motion Etkileşimi

Yumuşak kaydırma hareket hastalığını tetikleyebilir. Hareketin azaltılmasını tercih eden kullanıcılar için bunu her zaman devre dışı bırakın:

  <p>Respects <code>prefers-reduced-motion</code>.</p>

Kapsayıcılarda scroll-behavior

Bunu yalnızca sayfaya değil, kaydırılabilir herhangi bir kapsayıcıya uygulayın:

  <div class="tabs-panel">
    <div class="tab">Tab 1</div><div class="tab">Tab 2</div><div class="tab">Tab 3</div>
  </div>

Sınırlamalar

CSS scroll-behavior, kaydırma süresi veya yumuşatma işlevi üzerinde denetim sağlamaz. Hassas animasyon denetimi için JavaScript Web Animasyonları API'sini veya kaydırma eklentileriyle birlikte GSAP gibi kitaplıkları kullanın.

Sabit Üst Bilgiler için scroll-padding-top

Sabit bir üst bilgi çapa hedeflerinin üzerine geldiğinde, scroll-padding-top hedefin üst bilginin arkasında gizlenmemesi için bir uzaklık ekler:

  <p>Anchor targets offset by fixed header height.</p>

scroll-margin ve scroll-padding

scroll-margin uzaklığı doğrudan hedef öğeye ekler; scroll-padding ise uzaklığı kaydırma kapsayıcısına ekler. Her ikisi de sabit üst bilgi sorununu çözer:

  <div class="section">Section content</div>

Erişilebilirlik Notu

Yumuşak kaydırma bir kullanıcı deneyimi geliştirmesidir. Çapa gezinmesinin, bu özellik olmadan da çalıştığından her zaman emin olun — işlevsellik için yumuşak kaydırma davranışına güvenmeyin; bunu yalnızca görsel iyileştirme olarak kullanın.

Hızlı Kontrol

Vestibüler hareket hassasiyeti olan kullanıcılar için yumuşak kaydırma animasyonunun devre dışı bırakılmasını nasıl sağlarsınız?

Özet

html üzerindeki scroll-behavior: smooth, çapa bağlantıları ve JavaScript kaydırma yöntemleri için yumuşak, canlandırılmış kaydırmayı etkinleştirir. Kaydırma hedeflerini sabit üst bilgilerin arkasından uzaklaştırmak için scroll-padding-top kullanın. Erişilebilirlik için bir prefers-reduced-motion: reduce medya sorgusu içinde yumuşak kaydırmayı her zaman devre dışı bırakın.

Sıkça Sorulan Sorular

“scroll-behavior: smooth” dersi ücretsiz mi?

Evet — “scroll-behavior: smooth” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“scroll-behavior: smooth” dersinde ne öğreneceğim?

scroll-behavior ile bağlantı bağlantıları ve programatik kaydırmalar için yumuşak kaydırmayı etkinleştirin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“scroll-behavior: smooth” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. overflow: hidden scroll auto clip
  2. scroll-behavior: smooth
  3. scroll-snap-type ve scroll-snap-align
  4. ::-webkit-scrollbar ile Kaydırma Çubuğu Biçimlendirme
← CSS Academy Sayfasına Dön