Quale elemento sta causando la barra di scorrimento orizzontale? Rilevamento automatico

Question

Le barre di scorrimento orizzontali su siti Web e app HTML sono generalmente dannose per l'usabilità e indesiderate. È abbastanza normale trovarli spuntati inaspettatamente e ho bisogno di un modo per eseguire rapidamente il debug e rimuoverli.

Qual è il modo più semplice e veloce per trovare gli elementi HTML offensivi nella progettazione?
E c'è uno script o uno strumento per automatizzare questo?

Sì, si può passare attraverso la pagina della tua eliminazione/nascondere gli elementi uno ad uno fino a trovare un sospetto, ma questo richiede molto tempo, soprattutto se ci sono molteplici elementi offensivi. Sarebbe bello fare clic su un collegamento o eseguire uno script e avere tutti gli elementi sospetti evidenziati, delineati o stampati sulla console.

Per chiarire: il problema non è come risolvere , ma come rilevare esso. Mi piacerebbe una soluzione generale che possa funzionare ogni volta che viene visualizzato questo problema.

Answer 1

In un ambito più ristretto, è possibile utilizzare jQuery (per ottenere la larghezza) e node.scrollWidth per ottenere nodi con contenuti che superano i limiti.

http://jsfiddle.net/tomprogramming/v3Q6W/3/

Answer 2

Se si lascia che il flusso di contenuti, non sarà possibile ottenere barre di scorrimento orizzontale, in primo luogo. Non mettere troppi vincoli di larghezza. Di solito, si imposta solo la larghezza (minima) della colonna principale contenente tutto il contenuto. Potresti anche limitare la larghezza di alcune barre verticali (ad esempio barre di navigazione). Altrimenti, usa la proprietà della larghezza CSS (e altri meccanismi simili) con parsimonia.

La proprietà CSS dello spazio bianco tende anche a richiedere barre di scorrimento; usa questa proprietà con giudizio. Questo è veramente solo per la formattazione del codice, dove è importante mantenere interruzioni di riga come appaiono nella sorgente HTML per scopi di allineamento.