CSS
HTML
JavaScript
PHP
Coming Soon
Generatori
Varie & Old

CSS scroll-margin-right

La proprietà CSS3 scroll-margin-right imposta il margine destro per lo scorrimento

La proprietà scroll-margin-right consente di definire uno spazio aggiuntivo a destra dell'elemento durante l’operazione di scroll-to-view. Ciò aiuta a controllare la posizione visibile e migliorare l’esperienza di scorrimento.

Sintassi

scroll-margin-right: lunghezza;

Significato dei valori principali:

  • lunghezza: valore che definisce il margine destro per lo scorrimento. Può essere espresso in unità come px, em, rem, %, ecc.


Esempio proprietà: scroll-margin-right


Codice Esempio: scroll-margin-right

CODE: CSSpreleva codice
  1. html {
  2.   scroll-behavior: smooth;
  3. }
  4.  
  5. .scroll-container {
  6.   text-align: left;
  7.   width: 262px;
  8.   height: 250px;
  9.   overflow-x: scroll;
  10.   display: flex;
  11.   box-sizing: border-box;
  12.   border: 5px solid #222;
  13.   scroll-snap-type: x mandatory;
  14. }
  15.  
  16. .box {
  17.   flex: 0 0 250px;
  18.   width: 250px;
  19.   background-color: #56b6c2;
  20.   color: #fff;
  21.   font-size: 30px;
  22.   display: flex;
  23.   align-items: center;
  24.   justify-content: center;
  25.   scroll-snap-align: end;
  26.   border: 1px solid #fff;
  27.   border-radius: 10px;
  28. }
  29.  
  30. .target-right {
  31.   scroll-margin-right: 40px;
  32.   background-color: #e06c75;
  33. }

Contenuto Esempio: scroll-margin-right


📌 Nota sull’utilizzo delle proprietà scroll-*

Le proprietà della famiglia scroll-* offrono controllo preciso sul comportamento e sul posizionamento dello scroll nei contenitori overflow. Tuttavia, la loro efficacia può variare in base al tipo di interazione, al contesto e al metodo di attivazione dello scroll. Di seguito una panoramica generale:

  • scroll-behavior: controlla se lo scroll avviene in modo fluido (smooth) o istantaneo (auto). È supportata in interazioni utente (tastiera, mouse) e via JavaScript con metodi come scrollIntoView() o scrollTo().
  • scroll-margin*: imposta uno spazio esterno virtuale tra il target dello scroll e il bordo del contenitore. È utile per evitare che l’elemento scrollato venga troppo "incollato" al bordo. Agisce solo quando l’elemento è il target di scroll (es. scrollIntoView()).
  • scroll-padding*: definisce un’area interna del contenitore da considerare come "bordo attivo" per gli snap o il focus di scroll. È efficace nei contenitori con scroll-snap-type attivo o nei layout con focus automatico.
  • scroll-snap-type: abilita lo snap agli elementi figlio durante lo scroll, obbligando (o suggerendo) l’aggancio al più vicino snap-point. Richiede layout a scorrimento (overflow) e funzionerà solo se associato a elementi figli con scroll-snap-align.
  • scroll-snap-align: definisce dove un elemento figlio deve "agganciarsi" all'interno del contenitore scrollabile (es. inizio, centro, fine). Funziona solo se il contenitore ha scroll-snap-type.
  • scroll-snap-stop: impedisce che l’elemento venga saltato durante uno scroll veloce. Utile per forzare lo stop su sezioni importanti, ma funziona solo con scroll naturali (touch, tastiera, o scrollIntoView), non con scrollTo({ left: ... }).

Compatibilità e contesto: molte di queste proprietà funzionano meglio con interazioni naturali (touchpad, touchscreen, tastiera) e possono non comportarsi come previsto quando lo scroll è simulato in modo diretto con JavaScript. Per ottenere effetti coerenti, è consigliato usare layout con display: flex o grid, dimensioni fisse e contenitori overflow con scroll-snap-type attivo.


Prova questo esempio

DEMO
PayPal DONATE

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

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies