How to Know Which HTML Element is Causing Vertical Scroll Bar

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

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

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.