JavaScript Window Sizes and Scrolling

Understanding window dimensions and scrolling behavior is essential for building responsive web interfaces. This article covers how to measure the viewport (the visible area of the page), how to read the full size of the document, how to find out how far the page has scrolled, and how to scroll programmatically — including smooth scrolling and scrolling an element into view. Every concept comes with a runnable example.

The key distinction to keep in mind: the viewport is what the user can currently see, while the document is the entire page, most of which may be scrolled out of view.

Measuring the Viewport (Visible Window)

The viewport is the rectangle of the page the user sees right now. There are two ways to read its size, and the difference matters.

document.documentElement.clientWidth / clientHeight — the width and height of the viewport excluding the scrollbar. This is the correct choice when you need the actual area available for content.
window.innerWidth / innerHeight — the full window interior including the scrollbar width. Handy for quick checks, but it can be a few pixels larger than clientWidth when a scrollbar is present.

Use clientWidth/clientHeight when you are doing layout math (e.g. centering an element); use innerWidth/innerHeight for breakpoint-style checks where a few pixels do not matter.

// Viewport size excluding the scrollbar (recommended for layout)
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);

// Window interior including the scrollbar
console.log(window.innerWidth);
console.log(window.innerHeight);

The following example reports the viewport size live and updates whenever the window is resized.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Window Size Display</title>
</head>
<body>
    <div id="window-info"></div>
    <script>
        function displayWindowSize() {
            const w = document.documentElement.clientWidth;
            const h = document.documentElement.clientHeight;
            document.getElementById('window-info').innerHTML =
                'Viewport width: ' + w + 'px<br>' +
                'Viewport height: ' + h + 'px';
        }
        window.addEventListener('resize', displayWindowSize);
        window.addEventListener('load', displayWindowSize);
    </script>
</body>
</html>

Try it Yourself »

Measuring the Full Document Size

To get the height of the entire page — including the part scrolled out of view — read the scroll* properties of the document element. Because of historical browser inconsistencies, the reliable way is to take the maximum of several measurements:

const scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);
console.log('Full document height: ' + scrollHeight);

This is exactly the value you need to build a progress bar, an infinite-scroll trigger ("am I near the bottom?"), or a "scroll to bottom" button. scrollWidth works the same way for horizontal overflow.

Reading the Current Scroll Position

To find out how far the page has been scrolled, use:

window.scrollX — horizontal scroll offset in pixels (also called window.pageXOffset, an older alias).
window.scrollY — vertical scroll offset in pixels (alias window.pageYOffset).

scrollX/scrollY are the modern names; pageXOffset/pageYOffset are identical and still supported for backward compatibility.

console.log(window.scrollX); // same as window.pageXOffset
console.log(window.scrollY); // same as window.pageYOffset

Scrolling Programmatically

The window exposes three methods for moving the page yourself.

window.scrollTo(x, y) — scrolls to an absolute position. scrollTo(0, 0) returns to the top.
window.scrollBy(dx, dy) — scrolls relative to the current position. scrollBy(0, 100) moves 100px down from wherever you are.
element.scrollIntoView() — scrolls so a specific element becomes visible.

All three accept an options object with behavior: 'smooth' for an animated scroll instead of an instant jump:

// Smoothly scroll back to the top of the page
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });

// Nudge the page down by one viewport height
window.scrollBy({ top: window.innerHeight, behavior: 'smooth' });

Smooth Scrolling to an Element

scrollIntoView is the simplest way to jump to a section — for example, a "back to top" or "go to comments" button. Passing { behavior: 'smooth' } animates the movement:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Smooth Scrolling</title>
</head>
<body>
    <button onclick="document.getElementById('target').scrollIntoView({ behavior: 'smooth' });">Go to Target</button>
    <div style="height: 2000px;">
        <div id="target" style="margin-top: 1800px;">Target Element</div>
    </div>
</body>
</html>

Try it Yourself »

Tracking Scroll Position

Create dynamic effects based on the user's scroll position. The example below updates a fixed element to display the current vertical scroll offset on every scroll event.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Scroll Position Detector</title>
</head>
<body>
    <div style="height: 3000px;">
      <div style="position: fixed;">Scroll position: <span id="position">0</span>px</div>
    </div>
    <script>
        const positionSpan = document.getElementById('position');
        window.addEventListener('scroll', function() {
            positionSpan.innerHTML = window.scrollY;
        });
    </script>
</body>
</html>

Try it Yourself »

Note: For broader browser support, document.documentElement.scrollTop can be used as a fallback for window.scrollY.

Finding an Element's Position with getBoundingClientRect

element.getBoundingClientRect() returns the element's size and its position relative to the viewport (not the document). The returned object has top, bottom, left, right, width, and height.

Because the values are viewport-relative, they change as you scroll. To convert an element's position to document coordinates, add the current scroll offset:

const box = element.getBoundingClientRect();

// Distance from the top of the viewport (changes while scrolling)
console.log(box.top);

// Distance from the top of the whole document (stable)
const documentTop = box.top + window.scrollY;
console.log(documentTop);

A common use is checking whether an element is currently visible on screen:

function isInViewport(el) {
  const r = el.getBoundingClientRect();
  return r.top >= 0 &&
         r.bottom <= document.documentElement.clientHeight;
}

For a deeper look at the difference between viewport and document coordinates, see JavaScript Coordinates.

Customizing Scrollbars for Improved Aesthetics

Custom scrollbars can elevate the visual appeal of your website:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Custom Scrollbars</title>
    <style>
        body {
            height: 2000px; /* For demonstration */
        }
        /* Custom scrollbar styling */
        ::-webkit-scrollbar {
            width: 12px;
        }
        ::-webkit-scrollbar-track {
            background: darkblue;
        }
        ::-webkit-scrollbar-thumb {
            background-color: lightgreen;
            border-radius: 10px;
            border: 3px solid darkcyan;
        }
    </style>
</head>
<body>
    Scroll to see the custom scrollbar!
</body>
</html>

Try it Yourself »

In this example we used pseudo-elements to select and style different parts of the scrollbar. Here's a breakdown of each CSS property used:

::-webkit-scrollbar: This pseudo-element targets the scrollbar itself. We have set its width to 12 pixels, which determines the thickness of the scrollbar.
::-webkit-scrollbar-track: This pseudo-element represents the track (or groove) in which the scrollbar thumb travels. We styled it with a dark blue background. The colors used here are selected to show you the difference in each part of the scrollbar. More subtle colors are suggested for a real world application.
::-webkit-scrollbar-thumb: This pseudo-element targets the draggable part of the scrollbar, known as the thumb. We've chosen a light green for the thumb, making it stand out against the track for better visibility. The border-radius: 10px applies rounded corners to the thumb, giving it a modern and sleek look. The border of 3 pixels solid dark cyan is also used.

Note: The ::-webkit-scrollbar pseudo-elements are specific to Chromium-based browsers. For Firefox and modern standards, consider using the scrollbar-width and scrollbar-color CSS properties. Example: scrollbar-width: thin; scrollbar-color: lightgreen darkblue;

Conclusion

By mastering window sizing and scrolling techniques in JavaScript, you can greatly enhance the user experience and responsiveness of your web projects. Remember the core distinction — clientWidth/clientHeight measure the visible viewport, the scroll* properties measure the full document, and scrollX/scrollY (a.k.a. pageXOffset/pageYOffset) tell you how far you have scrolled. Use scrollTo, scrollBy, and scrollIntoView with behavior: 'smooth' to move the page yourself.

To continue, explore:

JavaScript Scrolling — events and patterns for reacting to scroll.
JavaScript Coordinates — viewport vs. document coordinate systems in depth.
Working with Styles in the DOM — read and change element styles, including the dimensions discussed here.

Practice

What methods can be used to measure the sizes and scrollings in JavaScript?

window.innerWidth/innerHeightdocument.clientTop/clientLeftdocument.documentElement.clientWidth/clientHeightwindow.scrollX/scrollYwindow.documentBody.scrollWidth