JavaScript Element scrollTopMax Property

What You’ll Learn

Element.scrollTopMax is a read-only instance property that returns the maximum top scroll offset possible for an element. Learn what it means, why it is non-standard, how to feature-detect it, and how to replace it with a portable calculation—with five examples and try-it labs.

Introduction

scrollTop tells you where a box is scrolled vertically. Sometimes you also need the maximum possible value—for example, to jump to the bottom or to compute scroll progress.

Firefox exposes that maximum as scrollTopMax. Because it is non-standard, this tutorial teaches both the Firefox property and the cross-browser formula you should prefer in real projects.

const box = document.getElementById("notes");

// Non-standard (mainly Firefox):
console.log(box.scrollTopMax);

// Portable alternative:
console.log(box.scrollHeight - box.clientHeight);

Understanding the Property

MDN: the read-only scrollTopMax property returns a number representing the maximum top scroll offset possible for the element.

• Read-only — inspect the maximum; do not assign to it.
• Number — pixel value for the farthest vertical scroll position.
• Non-standard — not in any public web specification.
• Limited support — mainly Firefox; feature-detect before using.

📝 Syntax

scrollTopMax

Value

A number representing the maximum vertical scroll offset in CSS pixels (where supported).

📋 Portable Maximum Scroll Pattern

MDN documents scrollTopMax but notes it is non-standard. For real projects, calculate the maximum with standard properties:

function getScrollTopMax(element) {
  if ("scrollTopMax" in element) {
    return element.scrollTopMax;
  }
  return element.scrollHeight - element.clientHeight;
}

Related learning: scrollTop, scrollHeight, clientHeight, and scrollLeftMax (also non-standard).

Examples Gallery

Examples follow MDN Element: scrollTopMax and focus on feature detection plus the portable alternative so labs work outside Firefox too.

const box = document.getElementById("notes");
console.log("scrollTopMax" in box);

false

const box = document.getElementById("notes");
const maxTop = box.scrollHeight - box.clientHeight;
console.log(maxTop);

128

const box = document.getElementById("notes");
const portable = box.scrollHeight - box.clientHeight;
const native = "scrollTopMax" in box ? box.scrollTopMax : null;
console.log({ portable, native });

{
  "portable": 128,
  "native": null
}

const box = document.getElementById("notes");
const maxTop = box.scrollHeight - box.clientHeight;
box.scrollTop = maxTop;
console.log(box.scrollTop);

128

console.log({
  supported: "scrollTopMax" in Element.prototype,
  access: "read-only",
  status: "Non-standard (MDN)",
  prefer: "scrollHeight - clientHeight"
});

{
  "supported": false,
  "access": "read-only",
  "status": "Non-standard (MDN)",
  "prefer": "scrollHeight - clientHeight"
}

🚀 Common Use Cases

• Finding the farthest vertical scroll position for a list or panel.
• Jumping to the bottom of a chat window or terms box.
• Building scroll progress percentages with current scrollTop.
• Understanding Firefox-only DOM helpers when reading older code.
• Teaching the difference between current scroll position and maximum scroll range.

🔧 How It Works

📝 Notes

• MDN marks scrollTopMax as Non-standard.
• Not labeled Deprecated or Experimental on the MDN page.
• Not part of any official specification.
• Related: scrollTop, scrollHeight, scrollLeftMax, clientHeight, JavaScript hub.

💡 Best Practices