Find Width of a Page, Including Overflowing Content

Question

I have a page which contains content that is not responsive. (The content is from a third party, nothing I can control.) Because of this there is content that overflows the document width.

I would like to detect the entire width of the document, including the content that is overflowing. I have tried the following JS:

//FIRST TRY:
var elmnt = document.getElementById("main-header");
    sWidth = elmnt.scrollWidth;

// NEXT TRY:
var sWidth = ('body').innerWidth();

// NEXT TRY:
var sWidth = $(window).width();


console.log(sWidth);

In all of these examples I get the container width but not the size including the overflow.

How do I do this with javascript (using jQuery is fine)?

Answer 1

Put a div just after body tag, containing all the things the page have. give a name to the div. just get #name.outerwidth()

Answer 2

If the overflowing content is visible then the query you're looking for is:

$(document).width()

or without jQuery:

document.body.clientWidth