Find the full width of a page including horizontal scroll bar

Question

I am trying to find the full width of the page, I have followed lot of answers on SO but no luck

I have tried

$(document).width()
window.outerWidth
window.innerWidth
document.body.scrollWidth
document.body.clientWidth

I tried to get these values, in pages with horizontal scroll bar in the bottom and the values I get for all the above code are same console.log($(document).width(),window.outerWidth,window.innerWidth,document.body.scrollWidth,document.body.clientWidth)

output: 1366 1366 1366 1366 1366

I am trying to find width of old sharepoint pages and they are not properly designed, i.e some tables/images have huge width specified in inline style and they are not contained inside their parent containers

I even tried to find the element with maximum width

var maxwidth = 1300;

$("body *").each(function(){
if($(this).width()>maxwidth){
  maxwidth = $(this).width();
}
})
console.log(maxwidth)

But it is not reliable. For example, in a page with no scroll bar the maxwidth was 2773 and it was 2000 for a page with scrollbar

Not sure what else can be done for getting the full width of the pages

What are you expecting? What are you getting instead? Have you done any searching yet (http://ryanve.com/lab/dimensions/)? — evolutionxbox, Mar 09 '17 at 10:18
@vignesh: You may go through this - https://jsfiddle.net/abhitalks/0ychu4hh/ . However, do remember to clean up your question and make it clear. Perhaps the downvotes are because of that. Also, note that horizontal scrollbar is of absolutely no relevance here. What if there is overflow set to hidden? — Abhitalks, Mar 09 '17 at 11:46

Hemant · Answer 1 · 2017-03-09T11:18:56.047

2

Try something like this:

$('document').ready(function() {
  $(window).scroll(function() {
    console.log($(this).outerWidth() + $(this).scrollLeft())
  })

})

html,
body {
  margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:100px;width:1600px;background:#b4b4b4"></div>

edited Mar 09 '17 at 11:18

answered Mar 09 '17 at 11:07

Hemant

1,961
2
17
27

score 1 · Answer 2 · answered Mar 09 '17 at 11:00

Are you looking for something like this https://jsfiddle.net/kxk5u79n/1/

$('#button').click(function () {
    var maxWidth = window.innerWidth;

  $('body').children().each(function () {
    var $el = $(this);

    if ($el.width() > maxWidth) {
        $el.css('width', maxWidth);
    }
  });
});

Check for the windows width, is an elements width wider we resize it to fit. This may not be fully accurate with margins and paddings.

score 1 · Answer 3 · answered Aug 01 '20 at 16:20

Thanks to the answer from @Hemant (user:8093451), I came up with another solution using Firefox (version 77.0.1 64-Bit):

Visit desired website and resize browser window to min width
If the website has an ideal width, a horizontal scrollbar should be visible now
From the Firefox Menu choose Tools, Web Developer, Web Console
In the bottom left add following javascript code:console.log(this.outerWidth + this.scrollX)
Drag the bar of the horizontal scrollbar to the max right
Run the javascript code by hitting Run or by shortcut Ctrl+Enter (Web Console must have focus)
The wanted value (min width of the website before a horizontal scrollbar appears) should be shown in the Web Console output; for example: 1292.
Finally, by using a free Firefox add-on like WindowSizer (by Dr. Cheap) you can set the width of a window to a desired value like 1292. Besides you can retrieve the current size of a window (not the value from above, but the visible width).

I was looking for a way to set the browser window width to the ideal website width, right before a horizontal scrollbar would be shown. If I remember correctly, this was a feature browsers supported in the past, but seem to lack nowadays. Thanks to your question @Vignesh Subramanian (user:848841) I ended up here.

Find the full width of a page including horizontal scroll bar

3 Answers3