it-swarm.com.de

Finden Sie ein Element, das die Anzeige der horizontalen Bildlaufleiste in Google Chrome verursacht

Wenn ich mein Chrome-Fenster auf 328 x 455 Pixel skaliere, sehe ich immer noch eine horizontale Bildlaufleiste ... Wie kann ich herausfinden, welches Element dies verursacht? Ich habe Elemente über die Entwicklerkonsole gesucht, kann das Element jedoch nicht finden.

Ich habe dann das Skript ausprobiert, das ich gefunden habe: here , aber nichts wird protokolliert .. __ Ich habe es mit Element body, section1 und einer Reihe anderer probiert, weiß aber nicht, was ich sonst tun soll.

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

"schnellste Methode": Dies wurde im Inspektor hinzugefügt:

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

und der Täter erschien

50
Luca

Es gibt einen ausgezeichneter Artikel von Chris Coyier, der Ihnen alles erklärt, was Sie zu diesem Problem brauchen.

nachdem ich diesen Artikel gelesen habe, verwende ich persönlich diesen Code in meiner Konsole, um herauszufinden, welches Element zu vertikalem Bildlauf führt:

drücken Sie F12 in Ihrem Browser, wählen Sie console und kopieren Sie diesen Code, fügen Sie ihn dort ein und drücken Sie die Eingabetaste

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

Update:
Es könnte sich um ein Element innerhalb einer iframe-Seite handeln, um vertikal zu scrollen.

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

Meine schnelle Lösung mit jQuery, Stijn de rycks createXPathFromElement und der Konsole:

/**
 * 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

Finden Sie den Schuldigen durch Kopieren. Fügen Sie den folgenden JS-Code in das Chrome-Konsolenfenster ein

javaScript: (Funktion (d) {var w = d.documentElement.offsetWidth, t = d.createTreeWalker (d.body, NodeFilter.SHOW_ELEMENT), b; while (t.nextNode ()) {b = t.currentNode.getBoundingClientRect (); if (b.right> w || b.left <0) {t.currentNode.style.setProperty ('Gliederung', '1 Punkt rot gepunktet', 'wichtig'); console.log (t.currentNode) ;}};}(dokumentieren));

1
Tamilselvan K

Das Hinzufügen eines Rahmens zu allem ließ das Problem für mich verschwinden. Der Täter war ein Dropdown-Menü, das mit opacity: 0. Ich habe es tatsächlich durch einen Eliminierungsprozess gefunden - lösche Elemente in DevTools nacheinander, beginnend mit den übergeordneten Elementen und bewege mich den Baum hinunter.

Aber jetzt kenne ich das Problem, das hätte es für mich getan:

* {
  opacity: 1 !important;
  visibility: visibile; !important;
}
0
Huon Imberger

es ist das erste Kind des Containers in der .main-footer. Es hat einen Rand: auto und einen Rand links: 20% Inline-Stil. Entfernen Sie das und wenden Sie einfach text-align: center an, da sich darin nur Textelemente befinden (input, span und a).

Das wird das Zeug machen.

Siehe hier: http://i.stack.imgur.com/vqx0C.jpg

0
husib