Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it L'avatar di supermac
    Registrato dal
    Jun 2001
    Messaggi
    1,856

    Ombreggiare lato di un div con overflow-x

    Ho dei div che contengono delle tabelle più larghe del display; il div contenitore ha la proprietà overflow-x impostata su scroll, e tutto funziona bene, ovvero su desktop browser mi permette di scrollare il div a dx e sx per vedere il contenuto e su tablet anche posso fare il panning della tabella a dx e sx per vedere tutti i dati.
    Ora però vorrei aggiungere un'ombreggiatura sul (o sui) lato/i del div quando il contenuto eccede la parte visibile, ovvero se all'apertura della pagina il div contiene una tabella più larga del display vorrei mostrare un'ombrina grigia sul lato dx in modo che l'utente capisca che c'è dell'altro e può scrollare.
    D'altra parte l'ombra sul lato dx dovrebbe scomparire quando, facendo il panning, ho raggiunto l'estremità destra del contenuto e dovrebbe altresì comparire l'ombreggiatura sul lato sx del div.
    Spero di essermi spiegato....
    Si può fare tutto via css? serve scrivere JS?
    Avete esempi da scopiazzare?
    Grazie

    PS ho visto ora il titolo che avevo messo... overscroll LOL
    Ultima modifica di supermac; 08-05-2018 a 17:23
    W la Ferari effetrenavenave!
    il computer è un somaro veloce! (neanche tanto ndr)

  2. #2
    Utente di HTML.it L'avatar di supermac
    Registrato dal
    Jun 2001
    Messaggi
    1,856
    Risolto, trovata questa semplice classe da applicare al div contenitore
    .shadowedbox{
    overflow-x:scroll;
    background-image:
    /* Shadows */
    linear-gradient(to right, white, white),
    linear-gradient(to right, white, white),

    /* Shadow covers */
    linear-gradient(to right, rgba(0,0,0,.25), rgba(255,255,255,0)),
    linear-gradient(to left, rgba(0,0,0,.25), rgba(255,255,255,0));

    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;

    /* Opera doesn't support this in the shorthand */
    background-attachment: local, local, scroll, scroll;
    }
    W la Ferari effetrenavenave!
    il computer è un somaro veloce! (neanche tanto ndr)

  3. #3
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Risolto,
    Bene

    PS ho visto ora il titolo che avevo messo... overscroll LOL
    Ho corretto.
    Buon proseguimento.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.