Sintassi

Significato dei valori principali:

• auto: (valore predefinito) consente la propagazione dello scroll orizzontale e gli effetti nativi del browser (es. rimbalzo).

• contain: impedisce che lo scroll orizzontale venga trasmesso ai contenitori genitori, mantenendo però eventuali effetti visivi come il rimbalzo.

• none: disattiva completamente la propagazione e gli effetti visivi dello scroll orizzontale.

Esempio proprietà: overscroll-behavior-x

Codice Esempio: overscroll-behavior-x

CODE: CSS

1. .scroll-x-outer {

2.   overflow-x: auto;

3.   background-color: #f0f0f0;

4.   padding: 10px;

5. }

7. .scroll-x-inner {

8.   width: 1000px;

9.   height: 120px;

10.   background-color: #50a14f;

11.   color: white;

12.   font-size: 18px;

13.   text-align: center;

14.   line-height: 120px;

15.   overscroll-behavior-x: none;

16. }

Contenuto Esempio: overscroll-behavior-x

  
  <style>
    .scroll-x-outer {
      overflow-x: auto;
      background-color: #f0f0f0;
      padding: 10px;
    }

    .scroll-x-inner {
      width: 1000px;
      height: 120px;
      background-color: #50a14f;
      color: white;
      font-size: 18px;
      text-align: center;
      line-height: 120px;
      overscroll-behavior-x: none;
    }
  </style>

  <div class="scroll-x-outer">
    <div class="scroll-x-inner">
      Contenuto largo 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