How to check with javascript / jquery which object (s) are causing a scrollbar on the page?

Your question is very interesting, here is my solution:

function escanearPagina(el) {
    var i = [],
    t, x, y, w, h,
    ww = $(window).width(),
    wh = $(window).height();

    el.each(function(){
        t = $(this);
        x = t[0].offsetLeft;
        y = t[0].offsetTop;
        w = t.outerWidth();
        h = t.outerHeight();

        if (w > ww || +x + w > ww || h > wh || +y + h > wh) {
            i.push(t[0]);
        }
    });
    return i;
}

Advantages:

• Allows you to define which area of the page you want it to scan;
• Calculates also based on padding, not only on elements width ( box-sizing:border-box does not affect the script);
• Returns an array with found elements;

How to use:

var resultado = escanearPagina($('body *')); //retorna todos os elementos dentro do body que geram scroll
$(resultado).addClass('eu-quebro-o-layout');

Here's an example: FIDDLE

You can test with this function:

function isOverflowed(element){
    return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

I've implemented a script to do this using jQuery:

$(function () {
    var $w = $(window),
        wb = $w.height(),
        wr = $w.width(),
        arr = [];

    $('*').each(function () {

        var $this = $(this),
            ofs = $this.offset(),
            eb = ofs.top + $this.height(),
            er = ofs.left + $this.width();

        if (eb > wb || er > wr) {
            arr.push(this);
        }

    });

    var msg = "Array contains: " + arr.length + "\n";
    for (var it = 0; it < arr.length; it++) {
        msg += arr[it].tagName + " - ";
        msg += "Largura: " + $(arr[it]).css('width') + "; ";
        msg += "Altura: " + $(arr[it]).css('height') + "; ";
        msg += "\n";
    }

    alert(msg);
});

jsfiddle

I am posting here my test code and would like help to improve it. You can edit.

$(document).ready(function(){
    debugger;
    var docWidth = toInt($("html").css('width'));
    var docHeight = toInt($("html").css('height'));
    $('div').each(function(){
        var objWidth  = toInt($(this).css("width")) + toInt($(this).css("padding-left")) + toInt($(this).css("padding-right"));                    
        var objHeight = toInt($(this).css("height")) + toInt($(this).css("padding-top")) + toInt($(this).css("padding-bottom"));
        if ( objWidth > docWidth ){
            alert("Tamanho do objeto " + $(this).tagName + " excedeu a página: " + objWidth);
        }

        if ( objHeight > docHeight ){
            alert("Tamanho do objeto " + $(this).tagName + "excedeu a página: " + objHeight);
        }
    }); 
   function toInt(str){
        return parseInt(str.replace(/[^\d]+/g,''));
   }   
});

At first it is checking correctly. But the tagName is always coming undefined (setei 'div' for now for testing, but should be '*'). Then I'll test in various situations to see if you're really getting everything right. I also think that I had to implement the margin.