Trova elemento che causa la visualizzazione della barra di scorrimento orizzontale in Google Chrome

Question

Quando ridimensiono la finestra di Chrome a 328 x 455 pixel, vedo ancora una barra di scorrimento orizzontale. Come posso scoprire quale elemento sta causando questo? Ho cercato elementi tramite la console degli sviluppatori, ma non sono riuscito a trovare l'elemento.

Ho quindi provato lo script che ho trovato here, ma non viene registrato nulla. L'ho provato sull'elemento body, section1 e un mucchio di altri ma non so cos'altro fare.

$(function() { 
     var f = $('body'); //document.getElementById("body"); 
     var contentHeight = f.scrollHeight; 
     var declaredHeight = $(f).height(); 

     var contentWidth = f.scrollWidth; 
     var declaredWidth = $(f).width(); 
     if (contentHeight > declaredHeight) { 
      console.log("invalid height"); 
     } 
     if (contentWidth > declaredWidth) { 
      console.log("invalid width"); 
     } 
    }); 

Answer 1

.slide-content .scroller { 
    width: 1024px; 
} 

modo "fastestest": aggiunto questo ispettore:

* { 
    border: 1px solid #f00; 
} 

e il colpevole è apparso

Answer 2

è il primo figlio del contenitore, all'interno .main-footer. Ha un margine: auto e un margine sinistro: 20% stile in linea. Rimuovilo e applica semplicemente text-align: center, dato che ci sono solo elementi di testo all'interno (input, span e a).

Questo farà il resto.

vedere qui: http://i.stack.imgur.com/vqx0C.jpg

Answer 3

C'è un excellent article da Chris Coyier che spiegano tutto il necessario su questo problema.

dopo aver letto questo articolo, io personalmente uso questo codice nel mio console per scoprire quale elemento causa di scorrimento orizzontale:

premere F12 nel browser, quindi scegliere console e copia incolla questo codice lì e premere invio

var all = document.getElementsByTagName("*"), i = 0, rect, docWidth = document.documentElement.offsetWidth; 
for (; i < all.length; i++) { 
    rect = all[i].getBoundingClientRect(); 
    if (rect.right > docWidth || rect.left < 0){ 
     console.log(all[i]); 
    } 
} 

Aggiornamento:
forse c'è un elemento all'interno di una pagina causa iframe verticalmente scorrimento. in questo caso si dovrebbe controllare ogni iframe sospetti con questo codice:

var frame = document.getElementsByTagName("iframe"); 
frame = frame[0]; 
frame = (frame.contentWindow || frame.contentDocument); 
var all = frame.document.getElementsByTagName("*"), i = 0, rect, docWidth = document.documentElement.offsetWidth; 
for (; i < all.length; i++) { 
    rect = all[i].getBoundingClientRect(); 
    if (rect.right > docWidth || rect.left < 0){ 
     console.log(all[i]); 
    } 
} 

Answer 4

La mia soluzione veloce con jQuery, stijn de ryck's createXPathFromElement e la console:

/** 
* Show information about overflowing elements in the browser console. 
* 
* @author Nabil Kadimi 
*/ 
var overflowing = []; 
jQuery(':not(script)').filter(function() { 
    return jQuery(this).width() > jQuery(window).width(); 
}).each(function(){ 
    overflowing.push({ 
     'xpath' : createXPathFromElement(jQuery(this).get(0)), 
     'width' : jQuery(this).width(), 
     'overflow' : jQuery(this).width() - jQuery(window).width() 
    }); 
}); 
console.table(overflowing); 


/** 
    * Gets the Xpath of an HTML node 
    * 
    * @link https://stackoverflow.com/a/5178132/358906 
    */ 
function createXPathFromElement(e){for(var t=document.getElementsByTagName("*"),a=[];e&&1==e.nodeType;e=e.parentNode)if(e.hasAttribute("id")){for(var s=0,l=0;l<t.length&&(t[l].hasAttribute("id")&&t[l].id==e.id&&s++,!(s>1));l++);if(1==s)return a.unshift('id("'+e.getAttribute("id")+'")'),a.join("/");a.unshift(e.localName.toLowerCase()+'[@id="'+e.getAttribute("id")+'"]')}else if(e.hasAttribute("class"))a.unshift(e.localName.toLowerCase()+'[@class="'+e.getAttribute("class")+'"]');else{for(i=1,sib=e.previousSibling;sib;sib=sib.previousSibling)sib.localName==e.localName&&i++;a.unshift(e.localName.toLowerCase()+"["+i+"]")}return a.length?"/"+a.join("/"):null} 

//**/