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

Display și Poziționare CSS Box Alignment Level 3

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.