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.