Найти элемент, который вызывает отображение горизонтальной полосы прокрутки в Google Chrome

Question

Найти элемент, который вызывает отображение горизонтальной полосы прокрутки в Google Chrome

Когда я увеличиваю размер окна Chrome до 328 x 455 пикселей, я все еще вижу горизонтальную полосу прокрутки.
Как я могу узнать, какой элемент является причиной этого? Я искал элементы через консоль разработчика, но не могу найти элемент.

Затем я попробовал скрипт, который я нашел здесь , но ничего не регистрируется.
Я попробовал его на элементе body, section1 и куча других, но не знаю, что еще делать.

    $(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");

        }

    });

576 5

css overflow scrollbar

5 ответов:

Comments

Ничего не найдено.

Luca · Accepted Answer · 2018-07-30 15:25:25

.slide-content .scroller {
  width: 1024px;
}
"самый быстрый" способ: добавлено в инспекторе:
* {
  border: 1px solid #f00 !important;
}
И появился виновник

Mosijava · Accepted Answer · 2018-07-15 10:54:14

Есть Отличная статья Криса Койера, которая объясняет все, что вам нужно об этой проблеме.

Прочитав эту статью, я лично использую этот код в моей консоли, чтобы узнать, какой элемент вызывает вертикальную прокрутку:

Нажмите F12 в браузере, затем выберите console, скопируйте туда этот код и нажмите 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]);
    }
}
Обновление:
это может быть элемент внутри iframe make page для вертикальной прокрутки. в этом случае вам следует проверить каждый подозреваемый iframe с этим кодом:
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]);
    }
}

Nabil Kadimi · Accepted Answer · 2017-07-12 13:03:43

Мое быстрое решение с помощью jQuery , Стийн де Райк createXPathFromElement и консоль:

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

//**/

husib · Accepted Answer · 2015-07-16 18:53:57

Это первый ребенок контейнера, внутри .главный-нижний колонтитул. У него есть поле: авто и поле слева: 20% встроенный стиль. Удалите это и просто примените text-align: center, так как внутри есть только текстовые элементы (input, span и a).

Это все сделает.

Смотрите здесь: http://i.stack.imgur.com/vqx0C.jpg

Tamilselvan K · Accepted Answer · 2018-09-06 04:54:57

Найдите виновника, скопировав приведенный ниже код js в окне консоли 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