Google Chrome

Question

में क्षैतिज स्क्रॉलबार का प्रदर्शन करने वाला तत्व ढूंढें जब मैं अपनी क्रोम विंडो को 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"); 
     } 
    }); 

Answer 1

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

"fastestest" जिस तरह से: निरीक्षक में इस कहा:

* { 
    border: 1px solid #f00; 
} 

और अपराधी दिखाई दिया

Answer 2

यह, कंटेनर के पहले बच्चे है मुख्य-पाद लेख के अंदर। इसमें मार्जिन है: ऑटो और मार्जिन-बाएं: 20% इनलाइन शैली। इसे हटाएं और बस टेक्स्ट-एलाइन को लागू करें: केंद्र, क्योंकि अंदर केवल टेक्स्ट तत्व हैं (इनपुट, अवधि और ए)।

वह सामान करेगा।

यहाँ देखें: http://i.stack.imgur.com/vqx0C.jpg

Answer 3

क्रिस Coyier से एक excellent article जो सब कुछ आप इस समस्या के बारे जरूरत समझाने नहीं है।

इस लेख को पढ़ने के बाद, मैं व्यक्तिगत रूप से इस कोड को मेरे कंसोल में पता लगाने के लिए जो तत्व क्षैतिज स्क्रॉल कारण का उपयोग करें: अपने ब्राउज़र में

प्रेस F12 तो सांत्वना चुनते हैं और वहाँ इस कोड और प्रेस पेस्ट कॉपी दर्ज

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 कारण पृष्ठ के अंदर एक तत्व स्क्रॉल खड़ी है। इस मामले में आप इस कोड के साथ हर संदिग्ध 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]); 
    } 
} 

Answer 4

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} 

//**/