Jump to content
  • entries
    21
  • comments
    0
  • views
    418

CSS'te Scrollbar

Doğuhan ELMA

Entry posted by Doğuhan ELMA in Fundamentals

15 views

 Share

1. Scrollbar Anatomisi ve Tarayıcı Davranışı

a) Scrollbar Bileşenleri 

┌─────────────────────────┐
│ ▲ (up button)           │  ← Scrollbar button
├─────────────────────────┤
│                         │  ← Track (kanal)
│         ████            │  ← Thumb (kaydırıcı)
│                         │
│                         │
├─────────────────────────┤
│ ▼ (down button)         │
└─────────────────────────┘

Bileşenler:

  • Track (Kanal): Scrollbar'ın arka plan alanı
  • Thumb (Kaydırıcı): Hareket eden kısım
  • Buttons: Ok butonları (bazı işletim sistemlerinde)
  • Corner: İki scrollbar'ın kesiştiği köşe

b) Scrollbar Türleri 

/* Klasik (Classic) Scrollbar */
/* - Her zaman görünür
   - Sabit genişlik (genellikle 15-17px)
   - Layout'u etkiler */

/* Overlay Scrollbar */
/* - İçerik üzerinde yüzer
   - Layout'u etkilemez
   - Kullanılmadığında kaybolur
   - macOS, mobil cihazlar */

 

2. Scrollbar ve Layout İlişkisi

a) Scrollbar'ın Layout'a Etkisi 

<div class="container">
  <div class="content">İçerik</div>
</div>
/* Klasik Scrollbar Davranışı */
.container {
  width: 500px;
  height: 300px;
  overflow: auto;
}

/* Scrollbar YOKSA:
   - İçerik alanı: 500px genişlik
   
   Scrollbar VARSA (Windows, Linux):
   - İçerik alanı: ~483px genişlik (scrollbar ~17px)
   - Scrollbar içerik alanından yer kaplar
   
   Scrollbar VARSA (macOS overlay):
   - İçerik alanı: 500px genişlik
   - Scrollbar içerik üzerinde yüzer */

b) Scrollbar Width Tespiti 

/* Scrollbar genişliğini hesaba kat */
.container {
  width: 500px;
  padding-right: 20px; /* İçerik için padding */
}

/* Scrollbar göründüğünde içerik kayması */
.container {
  overflow-y: scroll; /* Her zaman göster */
  /* veya */
  scrollbar-gutter: stable; /* Alan rezerve et */
}

 

3. Scrollbar ve Relative Birimlerin Hesaplanması

a) Viewport Birimleri (vw, vh) 

/* KRITIK: Viewport birimleri scrollbar'ı DIKKATE ALMAZ */

body {
  margin: 0;
}

.full-width {
  width: 100vw; /* Viewport genişliği */
  /* Scrollbar varsa yatay taşma oluşur! */
}

/* Problem gösterimi: */
html {
  overflow-y: scroll; /* Dikey scrollbar var */
}

.container {
  width: 100vw; /* ~1920px (scrollbar dahil) */
  /* Ama gerçek alan: ~1903px (scrollbar hariç) */
  /* Sonuç: Yatay scrollbar belirir! */
}

Çözüm Stratejileri: 

/* Çözüm 1: 100% kullan (önerilen) */
.full-width {
  width: 100%; /* Mevcut alanın tamamı */
}

/* Çözüm 2: dvw kullan (modern) */
.full-width {
  width: 100dvw; /* Dynamic viewport width */
  /* Scrollbar'ı dikkate alır */
}

/* Çözüm 3: scrollbar-gutter */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

.full-width {
  width: 100vw;
  /* scrollbar-gutter alanı rezerve ettiği için sorun yok */
}

/* Çözüm 4: calc ile manuel düzeltme */
.full-width {
  width: calc(100vw - 20px);
}

b) Percentage (%) Birimleri 

/* Parent container'a göre hesaplama */
.parent {
  width: 500px;
  height: 300px;
  overflow: auto;
}

.child {
  width: 100%; 
  /* Scrollbar YOKSA: 500px
     Scrollbar VARSA (klasik): ~483px
     Scrollbar VARSA (overlay): 500px */
}

/* Yüzde hesaplaması her zaman CONTENT BOX üzerinden */
.parent {
  width: 500px;
  padding: 20px;
  overflow-y: scroll; /* Scrollbar: 17px */
  box-sizing: border-box;
}

.child {
  width: 100%;
  /* 500px (total) - 40px (padding) - 17px (scrollbar) = 443px */
}

c) Container Query Birimleri (cqw, cqh) 

.container {
  container-type: inline-size;
  width: 500px;
  overflow-y: auto;
}

.child {
  width: 50cqw; 
  /* Container'ın genişliğinin %50'si
     Scrollbar varsa, scrollbar hariç alan üzerinden */
  font-size: 5cqw;
}

d) ch ve em Birimleri 

/* ch ve em scrollbar'dan BAĞIMSIZDIR */
.text {
  max-width: 65ch; /* 65 karakter genişliği */
  /* Scrollbar olup olmaması etkilemez */
}

.spacing {
  padding: 1em; /* Font size'a göre */
  /* Scrollbar etkisi yok */
}

 

4. Scrollbar'ı Etkileyen CSS Özellikleri

a) overflow Ailesi 

/* overflow - temel kontrol */
.element {
  overflow: visible;  /* Varsayılan - taşma görünür */
  overflow: hidden;   /* Taşma gizli - scrollbar yok */
  overflow: scroll;   /* Her zaman scrollbar */
  overflow: auto;     /* Gerektiğinde scrollbar */
  overflow: clip;     /* Taşma kesilir, scroll yok */
}

/* Eksen bazlı kontrol */
.element {
  overflow-x: auto;   /* Yatay scroll */
  overflow-y: scroll; /* Dikey scroll */
}

/* Modern: overflow inline/block */
.element {
  overflow-inline: auto;  /* Yazı yönü bazlı */
  overflow-block: scroll; /* Block yönü bazlı */
}

/* overflow-anchor - scroll pozisyon kontrolü */
.chat-container {
  overflow-anchor: auto; /* DOM değişikliklerinde pozisyonu koru */
}

 

b) scrollbar-gutter (Modern) 

/* Scrollbar için alan rezerve et */
.container {
  overflow-y: auto;
  scrollbar-gutter: auto; /* Varsayılan */
}

/* Her zaman alan rezerve et */
.stable-layout {
  overflow-y: auto;
  scrollbar-gutter: stable;
  /* Scrollbar olmasa bile alan ayrılır
     Layout shift'i önler */
}

/* İki taraflı (simetrik) */
.centered-content {
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  /* Sağ ve solda simetrik alan */
}

 

Kullanım Senaryosu: 

/* Modal açıldığında body scrollbar kaybolur */
body {
  overflow: hidden; /* Modal açık */
}

/* Problem: Layout kayar (scrollbar alanı kaybolur) */

/* Çözüm: */
body {
  overflow-y: auto;
  scrollbar-gutter: stable;
  /* Scrollbar kaybolsa bile alan rezerve kalır */
}

 

d) scrollbar-color (Firefox) 

/* Firefox için scrollbar renklendirme */
.custom-scrollbar {
  scrollbar-color: #888 #f1f1f1;
  /* İlk değer: thumb, İkinci değer: track */
}

/* Temaya göre */
.dark-theme {
  scrollbar-color: #555 #222;
}

.light-theme {
  scrollbar-color: #ccc #fff;
}

/* Transparent */
.overlay-style {
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

 

e) ::-webkit-scrollbar (Webkit/Blink) 

/* Webkit tabanlı tarayıcılar için özelleştirme */

/* Scrollbar genişliği */
.container::-webkit-scrollbar {
  width: 12px;                /* Dikey scrollbar */
  height: 12px;               /* Yatay scrollbar */
}

/* Track (kanal) */
.container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

/* Thumb (kaydırıcı) */
.container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
  border: 2px solid #f1f1f1; /* Track rengiyle padding efekti */
}

/* Hover durumu */
.container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Active durumu */
.container::-webkit-scrollbar-thumb:active {
  background: #333;
}

/* Corner (köşe) */
.container::-webkit-scrollbar-corner {
  background: #f1f1f1;
}

/* Buttons */
.container::-webkit-scrollbar-button {
  display: none; /* Ok butonlarını gizle */
}

 

Detaylı Özelleştirme: 

/* Minimal modern scrollbar */
.modern-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.modern-scroll::-webkit-scrollbar {
  width: 8px;
}

.modern-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.modern-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.modern-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* macOS benzeri */
.macos-style {
  scrollbar-width: thin;
}

.macos-style::-webkit-scrollbar {
  width: 10px;
}

.macos-style::-webkit-scrollbar-track {
  background: transparent;
}

.macos-style::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.macos-style::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
}

 

f) scroll-behavior 

/* Smooth scroll davranışı */
html {
  scroll-behavior: smooth;
}

/* Anchor linkler için */
a[href^="#"] {
  scroll-behavior: smooth;
}

/* Kullanıcı tercihine saygı */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

g) overscroll-behavior 

/* Scroll sınırlarında davranış */
.modal-content {
  overscroll-behavior: contain;
  /* Scroll sonunda parent'a geçmez */
}

body {
  overscroll-behavior-y: none;
  /* Bounce/pull-to-refresh engellenmiş */
}

/* Eksen bazlı */
.horizontal-scroller {
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

h) scroll-snap 

/* Snap scroll davranışı */
.gallery {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
}

.gallery-item {
  scroll-snap-align: start;
  scroll-snap-stop: always; /* Her öğede dur */
}

/* Dikey snap */
.fullpage-sections {
  scroll-snap-type: y proximity;
  overflow-y: auto;
}

.section {
  scroll-snap-align: center;
  min-height: 100vh;
}

 

5. Scrollbar ve Modern Tasarım

a) Minimal/Invisible Scrollbar Trendi 

/* Gizli ama fonksiyonel scrollbar */
.minimal-scroll {
  overflow: auto;
  scrollbar-width: none; /* Firefox */
}

.minimal-scroll::-webkit-scrollbar {
  display: none; /* Webkit/Blink */
}

/* Hover'da görünen scrollbar */
.hover-scrollbar {
  scrollbar-width: none;
}

.hover-scrollbar:hover {
  scrollbar-width: thin;
}

.hover-scrollbar::-webkit-scrollbar {
  width: 0;
  transition: width 0.3s;
}

.hover-scrollbar:hover::-webkit-scrollbar {
  width: 8px;
}

b) Custom Scrollbar Tasarımları

1. Minimal Modern: 

.minimal {
  scrollbar-width: thin;
  scrollbar-color: #e0e0e0 transparent;
}

.minimal::-webkit-scrollbar {
  width: 6px;
}

.minimal::-webkit-scrollbar-track {
  background: transparent;
}

.minimal::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 3px;
}

2. Branded/Colorful: 

.branded {
  scrollbar-width: auto;
  scrollbar-color: var(--brand-color) var(--bg-color);
}

.branded::-webkit-scrollbar {
  width: 12px;
}

.branded::-webkit-scrollbar-track {
  background: var(--bg-color);
}

.branded::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--brand-color-light),
    var(--brand-color-dark)
  );
  border-radius: 6px;
}

3. Animated/Interactive: 

.interactive::-webkit-scrollbar-thumb {
  background: #888;
  transition: background 0.2s, transform 0.2s;
}

.interactive::-webkit-scrollbar-thumb:hover {
  background: #555;
  transform: scaleX(1.2);
}

.interactive::-webkit-scrollbar-thumb:active {
  background: #333;
}

Responsive Scrollbar Stratejileri 

/* Desktop - normal scrollbar */
@media (min-width: 1024px) {
  .content {
    scrollbar-width: auto;
  }
  
  .content::-webkit-scrollbar {
    width: 12px;
  }
}

/* Tablet - ince scrollbar */
@media (max-width: 1023px) and (min-width: 768px) {
  .content {
    scrollbar-width: thin;
  }
  
  .content::-webkit-scrollbar {
    width: 8px;
  }
}

/* Mobile - gizli scrollbar */
@media (max-width: 767px) {
  .content {
    scrollbar-width: none;
  }
  
  .content::-webkit-scrollbar {
    display: none;
  }
}

/* Touch device tespiti */
@media (hover: none) and (pointer: coarse) {
  .content {
    scrollbar-width: none;
  }
}

 

Scrollbar ve Performans

a) will-change ile Optimizasyon 

.smooth-scroll {
  overflow-y: auto;
  will-change: scroll-position;
  /* GPU hızlandırma aktif */
}

/* Dikkat: Sürekli kullanma */
.scroll-container:hover {
  will-change: scroll-position;
}

.scroll-container {
  will-change: auto; /* Hover sonrası kapat */
}

b) contain ile İzolasyon 

.scroll-section {
  overflow: auto;
  contain: layout style paint;
  /* Scroll bu element içinde kalır */
  /* Tarayıcı optimize edebilir */
}

b) Split Panel Layout 

.split-panel {
  display: grid;
  grid-template-columns: 300px 1fr;
  height: 100vh;
}

.sidebar {
  overflow-y: auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.main-content {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

c) Horizontal Scroll Gallery 

.gallery {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scrollbar-width: thin;
  
  /* macOS momentum scroll */
  -webkit-overflow-scrolling: touch;
  
  /* Snap points */
  scroll-snap-type: x mandatory;
  scroll-padding: 1rem;
}

.gallery-item {
  scroll-snap-align: start;
  flex: 0 0 300px;
}

/* Fade edges efekti */
.gallery-wrapper {
  position: relative;
}

.gallery-wrapper::before,
.gallery-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 20px; /* Scrollbar yüksekliği */
  width: 50px;
  pointer-events: none;
  z-index: 1;
}

.gallery-wrapper::before {
  left: 0;
  background: linear-gradient(to right, white, transparent);
}

.gallery-wrapper::after {
  right: 0;
  background: linear-gradient(to left, white, transparent);
}
/* ÖZELLEŞTIR: Branded deneyim */
.app-container {
  scrollbar-color: var(--brand-primary) var(--bg-secondary);
}

/* ÖZELLEŞTIRME: Dark theme */
@media (prefers-color-scheme: dark) {
  .content {
    scrollbar-color: #444 #1a1a1a;
  }
}

/* VARSAYILAN BIRAK: Standard içerik */
article {
  overflow: auto;
  /* İşletim sistemi scrollbar'ı en iyi */
}

 

Özet: Scrollbar ve Modern CSS

Kritik Noktalar:

  1. Viewport Hesaplamaları: 100vw scrollbar genişliğini içerir, layout kaymasına neden olabilir
  2. scrollbar-gutter: Modern çözüm, scrollbar için alan rezerve eder
  3. Özelleştirme: Firefox (scrollbar-width, scrollbar-color) ve Webkit (::-webkit-scrollbar-*) farklı yaklaşımlar
  4. Accessibility: Scrollbar gizlerken scroll işlevselliğini koruyun
  5. Performance: will-change ve contain ile optimize edin
  6. Modern Tasarım: Minimal, hover-revealed, overlay scrollbar trendleri

Scrollbar, layout sisteminin kritik ama sık göz ardı edilen bir parçasıdır. Modern CSS özellikleri (scrollbar-gutter, dvw, container queries) bu zorlukları ele almak için geliştirilmiştir.

 Share

0 Comments

Recommended Comments

There are no comments to display.

×
×
  • Create New...

Important Information

  I accept