ScrollHint: suggerimenti per lo scrolling orizzontale

ScrollHint è una libreria JavaScript che permette di generare un "suggerimento", indirizzato all'utente in un particolare stile di design, riguardo al fatto che un determinato elemento sia scrollabile orizzontalmente.

Per implementare ScrollHint possiamo utilizzare l'installazione tramite NPM o più semplicemente i servizi CDN offerti, da collocare nell'head:

<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>

A questo punto, per rendere un contenuto scrollabile sull'asse delle x, ad esempio una collezione di elementi come una tabelle, una lista, o una sezione specifica del layout, occorre inserirlo in un elemento contenitore, o wrapper, ed applicare allo stesso una classe che verrà utilizzata nell'impostazione JavaScript:

<div class="js-scrollable">
  <table>
      <thead>
        <tr>
          <th>Col1</th>
          <th>Col2</th>
          <th>Col3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Lorem ipsum dolor sit.</td>
          <td>Lorem ipsum dolor sit.</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.</td>
        </tr>
      </tbody>
    </table>
</div>

Andiamo ora a settare il rispettivo Javascript, creando una nuova istanza della classe ScrollHint a cui verrà passato il selettore che indica la classe definita in precedenza:

new ScrollHint('.js-scrollable');

L'impostazione è terminata: quando l'utente passerà il mouse sul div con classe js-scrollable verrà mostrata un'icona che suggerirà il possibile scrolling orizzontale per navigare nel suo contenuto. Sono ovviamente disponibili moltissime opzioni che consentono di personalizzare l'aspetto e la resa finale dell'effetto, configurabili tramite un oggetto che verrà passato come secondo parametro:

new ScrollHint('.js-scrollable', {
  scrollHintIconAppendClass: 'scroll-hint-icon-white',
  applyToParents: true,
  i18n: {
    scrollable: 'スクロールできます',
    suggestiveShadow: true
  }
});

Ad esempio, con la proprietà dell'oggetto option chiamata suggestiveShadow impostata sul valore true, mentre l'utente scrolla orizzontalmente il suo contenuto comparirà un effetto con ombreggiatura laterale all'elemento contenitore, per un risultato che, come indica correttamente il nome, sarà maggiormente suggestivo.

Nella pagina ufficiale del progetto è disponibile una semplice documentazione che copre tutte le opzioni utilizzabili ed una sezione demo che mostra alcuni utilizzi di ScrollHint in azione. E' possibile, infine, seguire lo sviluppo della libreria direttamente nella relativa pagina GitHub.

Via ScrollHint