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

<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

new ScrollHint('.js-scrollable');

L'impostazione è terminata: quando l'utente passerà il mouse sul div js-scrollable

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

Ad esempio, con la proprietà dell'oggetto option suggestiveShadow true

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