如何知道哪个 HTML 元素导致垂直滚动条

Add:

* {
outline: 1px solid red;
}

Then when you scroll down you should see one really tall box. Right click on it and select inspect element. That should give you the information you need.

Use some browser debugging tool. Hit F12 to open it and check the dom elements. You'll be able to find it.

Ok, I got that if I change from margin-top to padding-top for container to adjust for nav then problem is solved. I reached to the solution after deleting elements in Firebug. So, quick fix problem is solved but my questions are still open.

How to know which element is causing scroll bar? Any trick?

Also, why margin-top is not working but padding-top has worked?

To make clear where I made change, I am adding the modified CSS:

   /* Adjust Nav */
#wrap > .container {
padding-top: 60px;


}

I find it's usually an image without a max-width: 100%

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.border = '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 check iframes with 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.border = '1px solid red';
}
}
}

I'd say you should use document.scrollingElement.

Paste the below in the console and scroll. It will log the culprit in the console.

function findScroller(element) {
element.onscroll = function() { console.log(element)}


Array.from(element.children).forEach(findScroller);
}


findScroller(document.body);

The below code helps you to find which element is causing vertical or holizon scroll bar.

This will find the element and create border with red:5px at the element of causing the scroll bar.

After run this in the devtool of your browser , check if any element has '_____target' class which is causing the scroll bar.

If you find the element, then comment out this tag from html and refresh and try it again.

/* Parameter should be either horizon OR vertical */
let checktype = 'horizon';






(function(which){
style();


var elements = document.querySelectorAll("body *");
var found = false;


elements.forEach(element => {
if( found ) return;
element.classList.add("_____zerospace");


var scrollbar = detectScrollbar(element);
if(!scrollbar[which])
{
console.log(element);
element.classList.add('_____target');
found = true;
}
})


return;


function detectScrollbar(target)
{
//var div = document.getElementById('container_div_id');
var element = document.scrollingElement;
var hasHorizontalScrollbar = element.scrollWidth > element.clientWidth;
var hasVerticalScrollbar = element.scrollHeight > element.clientHeight;


return {horizon: hasHorizontalScrollbar, vertical: hasVerticalScrollbar};
}


function style()
{
var style = document.createElement('style');
style.innerHTML = '._____zerospace { padding:0 !important; margin:0 !important } ._____target{border: solid 5px red}';


document.head.appendChild(style);


}


})(checktype)

I had tried the other debugging methods and nothing helped. But I found this article, and it's what I'm looking for!

How to find the cause of horizontal scrollbars

Setting the width of the body to 100vw

The viewport width unit (vw) is a useful way to make things a certain percentage of the screen wide.

When you use 100vw however, you make something the full width of the viewport and this includes the width of scrollbars. So the end result is that your page is slightly wider than the available width (which is the full width of the viewport without the scrollbars).

In short: if you use width: 100vw on a page that has a vertical scrollbar you end up with a horizontal overflow.

The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit.

If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar.

After reading this, I checked, and the horizontal overflow was exactly the width of the vertical scrollbar! Searched for 100vw in the code and found the problem.