overscroll-behavior (Controlul Scroll-ului și Evitarea Bounce-ului) în CSS

Previne efectul de scroll-chaining și reîmprospătarea accidentală pull-to-refresh pe dispozitive mobile cu overscroll-behavior: contain și none.

Sintaxă CSS
overscroll-behavior: contain; overscroll-behavior-y: none;

Proprietatea overscroll-behavior controlează acțiunea executată de browser atunci când utilizatorul atinge capătul unei zone derulabile (scroll boundary). În mod implicit, când derulezi un meniu lateral sau o fereastră modală și ajungi la sfârșitul conținutului, browserul propagă acțiunea către pagina părinte din spate (un comportament deranjant numit Scroll Chaining).

Izolarea derulării într-o fereastră modală sau meniu lateral
/* 1. Meniu lateral / Fereastră modală izolată */
.modal-corp {
    max-height: 400px;
    overflow-y: auto;
    
    /* Previne derularea paginii din spate când ajungi la capătul modalului */
    overscroll-behavior: contain;
}

/* 2. Aplicație de tip PWA: Dezactivarea gestului pull-to-refresh pe mobil */
body {
    /* Blochează reîncărcarea automată a paginii când tragi de sus în jos pe Chrome Android */
    overscroll-behavior-y: none;
}

Valori Posibile

  • auto (implicit): Comportamentul standard — permite transmiterea mișcării către elementul părinte (scroll chaining) și afișează efectul de elastic/bounce pe macOS și iOS.
  • contain: Blochează scroll chaining-ul. Când ajungi la capăt, derularea se oprește local, fără a mișca restul paginii. Efectul de bounce local rămâne activ.
  • none: Blochează complet atât scroll chaining-ul, cât și efectul vizual de bounce de la marginea ecranului.
Comunitate & Schimb de cunoștințe

Întrebări & Exemple de Cod: overscroll-behavior (Controlul Scroll-ului și Evitarea Bounce-ului)

Ai o nelămurire despre utilizarea comenzii overscroll-behavior (Controlul Scroll-ului și Evitarea Bounce-ului) sau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!

💬

Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!

Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.

Comunitate Adaugă o întrebare sau distribuie un cod

Moderare & Siguranță:

Pentru a menține calitatea și securitatea informațiilor, fiecare întrebare sau fragment de cod/prompt este analizat (manual sau prin moderare asistată de AI) înainte de publicare.