Scroll-Verhalten & Scroll Snap

/* Sofortiges Scrollen (Standard) */
.container-auto {
  scroll-behavior: auto;
  height: 300px;
  overflow-y: auto;
}

/* Sanftes, animiertes Scrollen */
.container-smooth {
  scroll-behavior: smooth;
  height: 300px;
  overflow-y: auto;
}

/* Oder auf html für die ganze Seite */
html {
  scroll-behavior: smooth;
}

<div class="demo-wrapper">
<div class="demo-buttons">
  <button data-target="s1">Section 1</button>
  <button data-target="s2">Section 2</button>
  <button data-target="s3">Section 3</button>
</div>
<div class="demo-columns">
  <div class="demo-col">
    <div class="demo-label">scroll-behavior: auto</div>
    <div class="scroll-auto">
      <div id="auto-s1" class="section">Section 1</div>
      <div id="auto-s2" class="section">Section 2</div>
      <div id="auto-s3" class="section">Section 3</div>
    </div>
  </div>
  <div class="demo-col">
    <div class="demo-label">scroll-behavior: smooth</div>
    <div class="scroll-smooth">
      <div id="smooth-s1" class="section">Section 1</div>
      <div id="smooth-s2" class="section">Section 2</div>
      <div id="smooth-s3" class="section">Section 3</div>
    </div>
  </div>
</div>
</div>
<script>document.querySelectorAll('.demo-buttons button').forEach(function(btn){btn.addEventListener('click',function(){var id=this.getAttribute('data-target');var at=document.getElementById('auto-'+id);var st=document.getElementById('smooth-'+id);var ac=document.querySelector('.scroll-auto');var sc=document.querySelector('.scroll-smooth');if(at&&ac)ac.scrollTop=at.offsetTop;if(st&&sc)sc.scrollTop=st.offsetTop})});</script>

.carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* Horizontales Snapping */
  padding: 1rem;
  background: #f3f4f6;
  border-radius: 8px;
}

.carousel-item {
  min-width: 250px;
  height: 150px;
  background: linear-gradient(135deg, #1a56db, #7c3aed);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  scroll-snap-align: start; /* Rastet am linken Rand ein */
  flex-shrink: 0;
}

<div class="carousel">
<div class="carousel-item">Bild 1</div>
<div class="carousel-item">Bild 2</div>
<div class="carousel-item">Bild 3</div>
<div class="carousel-item">Bild 4</div>
<div class="carousel-item">Bild 5</div>
</div>

.fullscreen-container {
  height: 300px;
  overflow-y: auto;
  scroll-snap-type: y mandatory; /* Vertikales Snapping */
}

.fullscreen-section {
  height: 100%; /* Jede Section ist Fullscreen */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: white;
  scroll-snap-align: start; /* Rastet oben ein */
}

.section-1 {
  background: linear-gradient(135deg, #1a56db, #0891b2);
}

.section-2 {
  background: linear-gradient(135deg, #7c3aed, #dc2626);
}

.section-3 {
  background: linear-gradient(135deg, #059669, #ea580c);
}

<div class="fullscreen-container">
<div class="fullscreen-section section-1">Section 1</div>
<div class="fullscreen-section section-2">Section 2</div>
<div class="fullscreen-section section-3">Section 3</div>
</div>

.sticky-demo {
  scroll-behavior: smooth;
  max-height: 300px;
  overflow-y: auto;
  scroll-padding-top: 60px; /* Offset für Sticky Header */
}

.sticky-header {
  position: sticky;
  top: 0;
  background: #7c3aed;
  color: white;
  padding: 1rem;
  font-weight: 700;
  z-index: 10;
}

.sticky-section {
  padding: 2rem 1rem;
  border-bottom: 1px solid #ddd;
}

<div class="sticky-demo">
<div class="sticky-header">
  <a href="#part1">Part 1</a>
  <a href="#part2">Part 2</a>
  <a href="#part3">Part 3</a>
</div>
<section id="part1" class="sticky-section">
  <h2>Part 1</h2>
  <p>Ohne scroll-padding würde der Header diese Überschrift verdecken.</p>
  <p>Dank scroll-padding-top: 60px bleibt der Abstand.</p>
</section>
<section id="part2" class="sticky-section">
  <h2>Part 2</h2>
  <p>scroll-padding-top kompensiert den Sticky Header automatisch.</p>
  <p>Das funktioniert bei Anker-Links und scrollIntoView().</p>
</section>
<section id="part3" class="sticky-section">
  <h2>Part 3</h2>
  <p>Perfekt für Sticky Navs in Dokumentationen!</p>
</section>
</div>
<script>document.querySelectorAll('.sticky-header a').forEach(function(a){a.addEventListener('click',function(e){e.preventDefault();var t=document.querySelector(this.getAttribute('href'));var c=document.querySelector('.sticky-demo');if(t&&c)c.scrollTop=t.offsetTop-c.querySelector('.sticky-header').offsetHeight})});</script>

.proximity-slider {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity; /* Lockeres Snapping */
  padding: 1rem;
  background: #f3f4f6;
  border-radius: 8px;
}

.proximity-card {
  min-width: 200px;
  height: 120px;
  background: linear-gradient(135deg, #059669, #0891b2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
  scroll-snap-align: center; /* Rastet in der Mitte ein */
  flex-shrink: 0;
}

<div class="proximity-slider">
<div class="proximity-card">Card 1</div>
<div class="proximity-card">Card 2</div>
<div class="proximity-card">Card 3</div>
<div class="proximity-card">Card 4</div>
<div class="proximity-card">Card 5</div>
</div>