Sintassi

Significato dei valori principali:

• auto: (valore predefinito) consente la propagazione e gli effetti nativi dell’overscroll verticale.

• contain: impedisce che lo scroll verticale venga trasmesso al contenitore genitore, ma mantiene eventuali effetti visivi come il rimbalzo.

• none: blocca completamente la propagazione e gli effetti visivi dello scroll sull’asse Y.

Esempio proprietà: overscroll-behavior-y

Codice Esempio: overscroll-behavior-y

CODE: CSS

1. .y-outer {

2.   height: 300px;

3.   overflow-y: auto;

4.   background-color: #eeeeee;

5.   padding: 10px;

6. }

8. .y-inner {

9.   height: 500px;

10.   background-color: #50a14f;

11.   color: white;

12.   padding: 10px;

13.   font-size: 18px;

14.   overscroll-behavior-y: contain;

15. }

Contenuto Esempio: overscroll-behavior-y

  
  <style>
    .y-outer {
      height: 300px;
      overflow-y: auto;
      background-color: #eeeeee;
      padding: 10px;
    }

    .y-inner {
      height: 500px;
      background-color: #50a14f;
      color: white;
      padding: 10px;
      font-size: 18px;
      overscroll-behavior-y: contain;
    }

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

  <div class="y-outer">
    <div class="y-inner">
      <p>Contenuto scrollabile</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