Parçacıklara Dön
CSS / TailwindCSS

CSS Yumuşak Kaydırma

CSS ile yumuşak kaydırma davranışı ve bölümler için scroll-snap etkinleştirme.

cssscrollsmoothbehavior
text-emerald-400">"text-gray">/* Global smooth scrolling */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; text-emerald-400">"text-gray">/* Account for fixed navbar */
}

text-emerald-400">"text-gray">/* Scroll snap for full-page sections */
.snap-container {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

.snap-section {
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

text-emerald-400">"text-gray">/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .snap-container {
    scroll-snap-type: none;
  }
}

Nasıl Kullanılır

Yumuşak bağlantı navigasyonu için html'ye scroll-behavior: smooth ekleyin. Sabit başlıklar için scroll-padding-top ile ofset ayarlayın. scroll-snap sınıfları tam sayfa bölüm yakalama deneyimi oluşturur.

İlgili Teknoloji

Tailwind CSS

Aklınızda Bir Proje mi Var?

Fikrinizi nasıl hayata geçirebileceğimizi konuşalım. İlk konseptten üretime hazır ürüne kadar — yanınızdayız.

veya ücretsiz görüşme ayarlayın