Check how far window can scroll?

Question

This seems like it should be pretty easy, so I just don't get what I'm overlooking. I've tried jQuery's $(document).width() and that is not returning the correct value. I just need to check how far a window can scroll (horizontally).

are you running this check after the page has fully loaded, or inline? — Silvertiger, Apr 20 '13 at 22:18
Minitech: I didn't mean to, I tried to reverse the rollback afterwards and couldn't figure out how. — Mr. Lavalamp, Apr 20 '13 at 22:21

score 0 · Answer 1 · edited May 23 '17 at 11:50

0

You need to get the viewport's width, and subtract that from the width of the document:

$(document).width() - $(window).width()

edited May 23 '17 at 11:50

Community

1
1

answered Apr 20 '13 at 22:18

Ry-

218,210
55
464
476

That won't work, because the problem is that $(document).width() is reporting inaccurate results. – Mr. Lavalamp Apr 20 '13 at 22:25
@Mr.Lavalamp: Odd! What result are you expecting, and what result are you getting? Is it reproducible in a short [example](http://codepen.io/pen)? – Ry- Apr 20 '13 at 22:26
When I resize the browser by clicking the 'windowed' button in the top right corner (the one that appears when the window is currently maximized) the horizontal scroll bar is rather small (as it should be). Then, I set the background element to be the size of $(document).width() on resize, and suddenly the horizontal scroll bar is massive. Therefore, $(document).width() must not be reporting correctly as far as my inexperienced eyes can see. – Mr. Lavalamp Apr 20 '13 at 22:33
1

@Mr.Lavalamp: Try logging it instead. If the background element has the slightest padding or margin, it will make the document bigger, making the element bigger next resize, making the document bigger, making the element bigger next resize, ... – Ry- Apr 20 '13 at 22:36
@Mr.Lavalamp: So now the problem would be how to fix it? :) What sort of browser support do you need? – Ry- Apr 20 '13 at 22:39

score 0 · Answer 2 · answered Apr 20 '13 at 22:39

Click the button to display this window's height and width (NOT including toolbars and scrollbars).

Have you tried straight javascript? Try running this code and see what sort of results you get. I would suggest placing any script to measure your dimension only after all dom and images have been loaded.

Hope that the below helps! Cheers!

<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
var w=window.innerWidth;
var h=window.innerHeight;
x=document.getElementById("demo");
x.innerHTML="Width: " + w + " Heigth: " + h;
}
</script>

</body>
</html>

Check how far window can scroll?

2 Answers2