web-dev-qa-db-ja.com

Googleで水平スクロールバーを表示する原因となっている要素を見つけるChrome

Chromeウィンドウを328 x 455ピクセルにサイズ変更すると、まだ水平スクロールバーが表示されます。どの要素がこれを引き起こしているのかを知るにはどうすればよいですか？要素が見つかりません。

次に、見つけたスクリプトを試しました here ですが、何も記録されません。要素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");
        }
    });
cssscrollbaroverflow
25
Flo
.slide-content .scroller {
  width: 1024px;
}

「最速」の方法：インスペクターにこれを追加しました：

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

そして犯人が現れた

70
Luca

Chris Coyierによる 優秀な記事 があり、この問題について必要なすべてを説明しています。

この記事を読んだ後、私は個人的にコンソールでこのコードを使用して、垂直スクロールを引き起こす要素を見つけます：

押す 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ページ内の要素で、垂直にスクロールする場合があります。この場合、疑わしいすべての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]);
    }
}
13
Mosijava

Overflowing elements

jQuery、 stijn de ryck's 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}

//**/
5
Nabil Kadimi

URLアドレスバーに以下のjsコードをコピーして貼り付け、犯人を見つけます。

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));
2
Tamilselvan K

すべてに境界線を追加すると、問題がなくなりました。犯人はopacity: 0で隠されたドロップダウンメニューでした。実際に削除のプロセスで見つけました-DevToolsの要素を1つずつ削除します。親要素から始めてツリーを下に移動します。

しかし、今私は問題を知っています、これは私のためにそれをしたでしょう：

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

.main-footer内のコンテナの最初の子です。 margin：autoとmargin-left：20％のインラインスタイルがあります。それを削除して、単純にtext-align：centerを適用します。これは、内部にテキスト要素（入力、スパン、a）しかないためです。

それがやることになります。

こちらをご覧ください： http://i.stack.imgur.com/vqx0C.jpg

0
husib