JavaScript Document scrollingElement Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word SCROLLINGELEMENT

Definition

Document.scrollingElement is a read-only reference to the Element that scrolls the document (MDN). In standards mode this is usually the root element—document.documentElement (<html>).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use document.scrollingElement. Start with this line.

JavaScript
document.scrollingElement
CallWhat it does
document.scrollingElementPrimary signature.

Built into the browser. Read or assign document.scrollingElement — no import required.

Library declarations
JavaScript
document.scrollingElement

Parameters

ParameterDescription
scrollingElementRequired. Element that owns page scroll
scrollTop / scrollLeftOptional. Position and programmatic scrolling

Return Value

Return ValueDescription
*The current value of document.scrollingElement.

JavaScript Examples

Example 1 — Read the Scrolling Element

Log which element scrolls the document in standards mode.

JavaScript
const scrollElm = document.scrollingElement;
console.log(scrollElm ? scrollElm.tagName : "null");
// "HTML" in standards mode
Try It Yourself

How It Works

  1. Read the property. No arguments—just document.scrollingElement.
  2. Standards mode. With a doctype, the value is usually the <html> root.
  3. Tag name. tagName prints "HTML" for that root.
  4. Null-safe. Guard with a ternary for rare quirks-mode null cases.

Example 2 — Scroll to Top (MDN)

Set scrollTop = 0 on the scrolling element.

JavaScript
const scrollElm = document.scrollingElement;
scrollElm.scrollTop = 0;
console.log(scrollElm.scrollTop); // 0
Try It Yourself

How It Works

  1. Get the scroll root. Store document.scrollingElement.
  2. Reset vertical scroll. Assign scrollTop = 0 (MDN pattern).
  3. Confirm. Reading scrollTop again should be 0 at the top.
  4. Alternative. window.scrollTo(0, 0) does a similar job via the Window API.

Example 3 — Compare with documentElement

Check whether both properties reference the same node in standards mode.

JavaScript
const same =
  document.scrollingElement === document.documentElement;

console.log("Same node in standards mode?", same);
console.log("compatMode:", document.compatMode);
Try It Yourself

How It Works

  1. Identity check. === tests if both point to one object.
  2. Standards pages. With <!DOCTYPE html>, both are usually <html>.
  3. Mode context. Log compatMode to confirm standards-like rendering.
  4. Why it matters. Prefer scrollingElement so quirks documents still resolve correctly when possible.
Compatibility

Browser Support

Document.scrollingElement is Baseline Widely available on MDN (since August 2016). It is the standard way to obtain the document’s scrolling root.

✓ Baseline · Widely available

Document.scrollingElement

Read-only Element that scrolls the document — usually documentElement in standards mode.

99% Browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
scrollingElement Excellent

Bottom line: Safe for modern apps. Always ship <!DOCTYPE html>, and null-check before calling scroll APIs if you must support quirks documents.

Frequently Asked Questions

A read-only reference to the Element that scrolls the document. MDN: in standards mode this is usually document.documentElement (the root <html> element).
No. MDN marks Document.scrollingElement as Baseline Widely available (since August 2016). It is the standard way to find the scrolling root.
MDN example: const scrollElm = document.scrollingElement; scrollElm.scrollTop = 0; You can also use window.scrollTo(0, 0).
In standards mode, yes — MDN says scrollingElement is the root element (documentElement). In quirks mode the behavior differs and may involve body or null.
MDN: in quirks mode scrollingElement returns the HTML body element if it exists and is not potentially scrollable; otherwise null.
Both work for page scroll. scrollingElement gives you the Element with scrollTop/scrollLeft. window.scrollTo is a convenient Window API for the same job.

Next: styleSheets

Learn how to inspect the document’s stylesheet list from JavaScript.

styleSheets tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Document scripts Property JavaScript Document styleSheets Property