How to Know Which HTML Element is Causing Vertical Scroll Bar

Question

I am learning Bootstrap. On the getting started menu, there are few templates given. I am playing with that. One example is about fixed Footer. I used nav from previous example

Answer 1

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;

    }

Answer 2

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

Answer 3

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';
       }
   }
}

Answer 4

I'd say you should use document.scrollingElement.

Answer 5

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

Answer 6

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);