css - style - Buscar elemento que está causando la visualización de la barra de desplazamiento horizontal en Google Chrome

scroll snap js

Question

Cuando dimensiono mi ventana de Chrome a 328 x 455 píxeles todavía veo una barra de desplazamiento horizontal. ¿Cómo puedo saber qué elemento está causando esto? He estado buscando elementos a través de la consola de desarrolladores, pero no puedo encontrar el elemento.

Luego probé el script que encontré here , pero no se registra nada. Lo probé en element body , section1 y muchos otros, pero no sé qué más hacer.

    $(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

Encuentre al culpable copiando el siguiente código js en la ventana de la consola de Chrome

javascript:(function(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(''outline'',''1px dotted red'',''important'');console.log(t.currentNode);}};}(document));

Answer 2

Es el primer hijo del contenedor, dentro de .main-footer. Tiene un margen: automático y un margen izquierdo: 20% de estilo en línea. Elimine eso y simplemente aplique text-align: center, ya que solo hay elementos de texto dentro (input, span y a).

Eso hará las cosas.

Consulte aquí: http://i.stack.imgur.com/vqx0C.jpg

Answer 3

Hay un excelente artículo de Chris Coyier que explica todo lo que necesita sobre este problema.

Después de leer este artículo, personalmente uso este código en mi consola para averiguar qué elemento causa el desplazamiento vertical:

presione F12 en su navegador, luego elija la console y copie, pegue este código allí y presione enter

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

Actualizar:
podría ser un elemento dentro de un iframe make page para desplazarse verticalmente. En este caso, debe verificar cada iframe sospechoso con este código:

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

Mi solución rápida con jQuery , stijn de ryck''s createXPathFromElement y la consola:

/**
 * 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://.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}

//**/

Answer 5

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

La forma "más rápida": agregó esto en el inspector:

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

y apareció el culpable