Javascript Aggiungi Rimuovi Classe Sullo Scorrimento

| | | | | | | | | | | | | | | | | |

Barre di scorrimento ed esperienza utente

Gli utenti ora sono abituati a una certa esperienza durante la navigazione nei siti Web. Ad esempio, ti aspetteresti che il logo di un`azienda nell`angolo in alto a sinistra di un sito ti porti alla home page. Ma cosa succede se non funziona? E se tutto su questo sito fosse opposto a quello che pensavi sarebbe stato?

Immagina se ci fosse una barra di scorrimento, ma quando sposti il pulsante di scorrimento del mouse o scorri il dito sul touchpad del dispositivo, non succede nulla. Sarebbe considerata una esperienza utente orribile.

Cosa - ciò che rende o rompe una buona esperienza utente può essere un lavoro a sé stante, ma parte di esso - funziona molto sicuramente la capacità e le barre scorrono per nascondersi per motivi estetici.

Le barre di scorrimento sono ottimi indicatori di ciò che possiamo aspettarci di vedere su una pagina web. Se vediamo una barra di scorrimento, ci aspetteremmo che sia necessario scorrere verso il basso per visualizzare il contenuto. Quando non vedi una barra di scorrimento, di solito è per uno dei due motivi:

  1. Quello che vedi è ciò che ottieni: l`altezza e la larghezza dell`area visibile (lo schermo) corrispondono a l`altezza e la larghezza del sito.
  2. Il design del sito prevede una sorta di freccia o la funzione di animazione che mostra che più contenuti sono disponibili tramite lo scrolling. Solo quando inizi a scorrere, viene visualizzata la barra di scorrimento. L`impostazione predefinita è rimanere nascosta fino ad allora.
  3. Come sviluppatore, l`implementazione dell`uso corretto della barra di scorrimento migliorerà l`esperienza utente di un sito, che manterrà i clienti sul sito.

Lato note: assicurati di utilizzare le barre di scorrimento orizzontali quando intenzionalmente desideri utilizzarle. Se vengono visualizzate involontariamente sul tuo sito, di solito è perché qualcosa non va nel dimensionamento dei componenti. Non nascondere le barre di scorrimento orizzontali sul obiettivo quando non dovrebbero essere presenti.

Implementazione CSS

La prima cosa da notare su questa implementazione è che tutti i principali browser sono creati uguali. Ciò che funziona per Firefox non funzionerà per Chrome o Internet Explorer e viceversa. CSS utilizza quelli che chiamiamo prefissi del provider o prefissi del browser per aiutarci a fornire supporto per più browser. Li presentiamo di seguito:

< br>

Prefisso fornitore di Cheat Sheet

prefisso del fornitore Copertura del browser
-webkit- Chrome , Safari, le versioni più recenti di Opera e la maggior parte dei browser iOS, incluso Firefox per iOS
-moz - Firefox (non iOS)
-o- Versioni precedenti di Opera
-ms- Internet Explorer e MS Edge

URL: credito: MDN - Prefissi CSS

Testo alternativo: Mozilla Developer Network ha creato un pratico cheat sheet per ricordare quale prefisso utilizzare use

Didascalia: MDN ha creato un pratico cheat sheet per ricordare quale prefisso utilizzare per il browser

La domanda diventa quindi come sappiamo quando abbiamo bisogno di prefissi e quando non lo sono? I creatori di CSS sperimentano sempre nuove proprietà e nuovi modi di fare le cose: se c`è una nuova proprietà sufficiente, probabilmente non è ancora compatibile con tutti i browser.

Fortunatamente, ci sono strumenti che danno un`occhiata al tuo CSS e aggiungi i prefissi che ti servono. Puoi anche farlo manualmente e utilizzare un sito come caneuse o documenti per il tuo MDN per determinare la compatibilità del browser.

Let code

Quando eseguiamo questo codice in Chrome, dovrebbe produrre uno sfondo grigio div e del testo che puoi scorrere. Sono incluse le due implementazioni più comuni: Firefox è all`inizio del codice in