Find element that is causing the showing of horizontal scrollbar in Google Chrome
.slide-content .scroller {
width: 1024px;
}
"fastestest" way: added this in inspector:
* {
border: 1px solid #f00 !important;
}
and the culprit appeared
There is an excellent article by Chris Coyier which explain everything you need about this problem.
after reading this article, I personally use this code in my console to find out which element cause vertical scroll:
press F12
in your Browser then choose console
and paste the below code there and press 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]);
all[i].style.borderTop = '1px solid red';
}
}
Update:
if the above code didn't work it might be an element inside an iframe that make the page to vertically scroll.
in this case you can search within the iframes
using this code:
var frames = document.getElementsByTagName("iframe");
for(var i=0; i < frames.length; i++){
var frame = frames[i];
frame = (frame.contentWindow || frame.contentDocument);
var all = frame.document.getElementsByTagName("*"),rect,
docWidth = document.documentElement.offsetWidth;
for (var j =0; j < all.length; j++) {
rect = all[j].getBoundingClientRect();
if (rect.right > docWidth || rect.left < 0){
console.log(all[j]);
all[j].style.borderTop = '1px solid red';
}
}
}
Find the culprit by copy paste the below js code in your URL address bar.
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));