Sintassi

Significato dei valori principali:

• auto: (valore predefinito) consente il comportamento di overscroll standard, incluso il rimbalzo o la propagazione dello scroll.

• contain: impedisce la propagazione dello scroll verso i contenitori genitori, ma mantiene eventuali effetti visivi come il rimbalzo.

• none: disattiva completamente la propagazione e gli effetti visivi di overscroll, rendendo il contenitore completamente isolato.

Esempio proprietà: overscroll-behavior

Codice Esempio: overscroll-behavior

CODE: CSS

1. .outer-scroll {

2.   height: 300px;

3.   overflow: auto;

4.   background-color: #ddd;

5.   padding: 10px;

6.   overscroll-behavior: contain;

7. }

9. .inner-scroll {

10.   height: 400px;

11.   overflow-y: auto;

12.   background-color: #50a14f;

13.   padding: 10px;

14.   color: white;

15.   font-size: 18px;

16. }

Contenuto Esempio: overscroll-behavior

  
  <style>
    .outer-scroll {
      height: 300px;
      overflow: auto;
      background-color: #ddd;
      padding: 10px;
      overscroll-behavior: contain;
    }

    .inner-scroll {
      height: 400px;
      overflow-y: auto;
      background-color: #50a14f;
      padding: 10px;
      color: white;
      font-size: 18px;
    }

    .inner-scroll p {
      margin: 20px 0;
    }
  </style>

  <div class="outer-scroll">
    <div class="inner-scroll">
      <p>Contenuto scrollabile interno</p>
      ...
    </div>
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser