Sintassi

Significato dei valori principali:

• auto: (valore predefinito) consente il comportamento standard dell’overscroll sull'asse verticale, compresa la propagazione.

• contain: impedisce che lo scroll verticale venga propagato al contenitore genitore, ma può mostrare effetti come il rimbalzo.

• none: blocca completamente la propagazione dello scroll verticale e disabilita gli effetti visivi dell’overscroll sull’asse verticale.

Esempio proprietà: overscroll-behavior-block

Codice Esempio: overscroll-behavior-block

CODE: CSS

1. .outer-container {

2.   height: 300px;

3.   overflow: auto;

4.   background-color: #f0f0f0;

5.   padding: 10px;

6. }

8. .inner-container {

9.   height: 400px;

10.   overflow-y: auto;

11.   background-color: #50a14f;

12.   color: white;

13.   padding: 10px;

14.   font-size: 18px;

15.   overscroll-behavior-block: contain;

16. }

Contenuto Esempio: overscroll-behavior-block

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

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

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

  <div class="outer-container">
    <div class="inner-container">
      <p>Contenuto interno 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