# Calculate the distance to the bottom of a page

Pixels left to scroll before the end of the page.

Canonical: https://1loc.dev/dom/calculate-the-distance-to-the-bottom-of-a-page/
Version: 1.0.0
Runtime: JavaScript · modern browsers (DOM)
Verification: Usage lines executed in headless Chromium against the fixture markup; no external services
Updated: 2026-10-28

## Implementation

```javascript
function distanceToBottom() { return document.documentElement.scrollHeight - window.innerHeight - window.scrollY; }
```

## Usage

Markup:

```html
<div style="height: 3000px">A 3000 px tall page</div>
```

Script:

```javascript
// A 3000 px tall page in a 720 px tall viewport:
distanceToBottom(); // → 2280
window.scrollTo(0, 280);
distanceToBottom(); // → 2000
```

Lines marked → were executed in headless Chromium against the markup above, and each result was compared with the value shown. Lines marked e.g. are illustrative.

## Limits

- document.documentElement.scrollHeight measures the whole page. The original used document.body.scrollHeight, which can differ when body has margins or a fixed height.
- Scroll positions can be fractional on zoomed or high-density screens: compare with a 1 px tolerance.
- For infinite scrolling, an IntersectionObserver on a sentinel element avoids measuring on every scroll event.

The function does not validate its arguments. Add checks where it receives untrusted input.

## Source and license

Original: https://github.com/phuocng/1loc/blob/14b481cf60dff1620ab1bb99a43b1f68068cdd9b/contents/calculate-the-distance-to-the-bottom-of-a-page.mdx
Author: Nguyen Huu Phuoc and original contributors
Contributors: See original repository history
Source commit: 14b481cf60dff1620ab1bb99a43b1f68068cdd9b
Copyright (c) 2020 phuoc-ng
License: MIT — https://1loc.dev/licenses/
Maintainer: Oveyon
Modifications: A function measuring document.documentElement instead of a value from document.body. Executed in Chromium. Original MDX retained as inert source evidence.