Sintassi

Significato dei valori principali:

• auto: (valore predefinito) consente il comportamento di overscroll standard sull’asse orizzontale, inclusa la propagazione verso i contenitori esterni.

• contain: impedisce che lo scroll orizzontale venga propagato al contenitore genitore, ma mantiene eventuali effetti visivi.

• none: disattiva completamente sia la propagazione dello scroll orizzontale sia gli effetti visivi di overscroll.

Esempio proprietà: overscroll-behavior-inline

Codice Esempio: overscroll-behavior-inline

CODE: CSS

1. .outer-horizontal {

2.   width: 100%;

3.   overflow-x: auto;

4.   white-space: nowrap;

5.   background-color: #e0e0e0;

6.   padding: 10px;

7. }

9. .inner-horizontal {

10.   display: inline-block;

11.   width: 1200px;

12.   height: 150px;

13.   background-color: #50a14f;

14.   color: white;

15.   font-size: 20px;

16.   text-align: center;

17.   line-height: 150px;

18.   overscroll-behavior-inline: contain;

19. }

Contenuto Esempio: overscroll-behavior-inline

  
  <style>
    .outer-horizontal {
      width: 100%;
      overflow-x: auto;
      white-space: nowrap;
      background-color: #e0e0e0;
      padding: 10px;
    }

    .inner-horizontal {
      display: inline-block;
      width: 1200px;
      height: 150px;
      background-color: #50a14f;
      color: white;
      font-size: 20px;
      text-align: center;
      line-height: 150px;
      overscroll-behavior-inline: contain;
    }
  </style>

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