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

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.

---

UPDATE:

Here is a nifty chrome plugin that can do that for you : http://pesticide.io/

Answer 2

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)