web-dev-qa-db-fra.com

Rechercher l'élément qui provoque l'affichage de la barre de défilement horizontale dans Google Chrome

Lorsque je redimensionne ma fenêtre Chrome à 328 x 455 pixels, je vois toujours une barre de défilement horizontale . Comment puis-je savoir quel élément en est la cause? J'ai cherché des éléments via la console de développement, mais je ne trouve pas l'élément.

J'ai ensuite essayé le script que j'ai trouvé ici , mais rien n'a été enregistré ..__ Je l'ai essayé sur l'élément body, section1 et un tas d'autres, mais je ne sais pas quoi faire.

    $(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");
        }
    });
cssscrollbaroverflow
16
Flo
.slide-content .scroller {
  width: 1024px;
}

"plus rapide" manière: a ajouté ceci dans l'inspecteur:

* {
  border: 1px solid #f00 !important;
}

et le coupable est apparu

50
Luca

Il y a un excellent article de Chris Coyier qui explique tout ce dont vous avez besoin à propos de ce problème.

après avoir lu cet article, j’utilise personnellement ce code dans ma console pour savoir quel élément est à l'origine du défilement vertical:

appuyez sur F12 dans votre navigateur puis choisissez console et copiez-le, collez-y le code et appuyez sur entrée

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]);
    }
}

Mettre à jour:
ce pourrait être un élément dans une page de fabrication iframe à faire défiler verticalement . dans ce cas, vous devriez vérifier chaque iframe suspecté avec ce code:

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]);
    }
}
12
Mosijava

 Overflowing elements

Ma solution rapide avec jQuery, Stijn de ryck's createXPathFromElement et 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}

//**/
2
Nabil Kadimi

Trouvez le coupable en copiant le code js ci-dessous dans la fenêtre de la console chromée

javaScript: (fonction (d) {var w = d.documentElement.offsetWidth, t = d.createTreeWalker (d.body, NodeFilter.SHOW_ELEMENT), b; tandis que (t.nextNode ()) {b = t.currentNode.getBoundingClientRect (); if (b.right> w || b.left <0) {t.currentNode.style.setProperty ('outline', '1px en pointillé rouge', 'important'); console.log (t.currentNode) ;}};}(document));

1
Tamilselvan K

c'est le premier enfant du conteneur, dans .main-footer. Il a une marge: auto et une marge gauche: style inline de 20%. Supprimez-le et appliquez simplement text-align: center, car il ne contient que des éléments de texte (input, span et a).

Cela fera l'affaire.

Voir ici: http://i.stack.imgur.com/vqx0C.jpg

0
husib