scrollIntoView: Browser Support, Options, Issues

What is scrollIntoView?

scrollIntoView is an Element method standardized in the W3C CSSOM View Module. Calling element.scrollIntoView() asks the browser to scroll every scrollable ancestor until the target appears in the viewport, with optional control over alignment and animation through an options object.

Which browsers does scrollIntoView support?

scrollIntoView works in every major modern browser, including Chrome, Edge, Firefox, Safari, Opera, and Samsung Internet. Internet Explorer shipped only the Boolean form and never added the smooth behavior or the options dictionary.

What are the scrollIntoView options?

scrollIntoView accepts either a Boolean argument (legacy form) or an options object with three properties: behavior, block, and inline. The options object gives you precise control over alignment and animation, and every Chromium-based browser, Firefox 36+, and Safari 15.4+ honor it.

• behavior: Controls whether the scroll animates or jumps. Accepts auto (the browser picks based on the target's CSS scroll-behavior), smooth (animated), or instant (one-frame jump). Defaults to auto.
• block: Sets vertical alignment inside the scroll container. Accepts start (default), center, end, or nearest. The nearest value picks the closest edge to minimize the scroll distance.
• inline: Sets horizontal alignment. Accepts start, center, end, or nearest (default). Most pages do not need to scroll horizontally, so nearest leaves the X axis untouched.
• Boolean legacy form: scrollIntoView(true) aligns the element's top edge with the top of the scroll container, and scrollIntoView(false) aligns the bottom edge with the bottom. The Boolean form predates the options object and ignores behavior.
• No arguments: Calling scrollIntoView() with no arguments behaves like scrollIntoView(true), aligning the element to the top of its scrollable ancestor with the browser's default scroll behavior.

How do you use scrollIntoView in JavaScript?

Get a reference to the target element, call scrollIntoView on it, and pass an options object that describes the alignment and animation you want. The browser walks every scrollable ancestor and scrolls each one until the target reaches the configured position.

• Pick a target element: Use document.querySelector or any DOM lookup that returns the element you want to bring into view.
• Feature-detect the method: Confirm typeof element.scrollIntoView === "function" before calling it, so the code degrades cleanly on browsers that ship an empty stub or no implementation.
• Pass the options object: Set behavior (smooth or instant), block (vertical alignment), and inline (horizontal alignment) to match the design.
• Call scrollIntoView: The browser scrolls every scrollable ancestor until the target reaches the configured alignment.
• Handle scroll completion: Listen for the scrollend event on the scroll container if you need to run code once the smooth animation finishes.

// Smoothly scroll a section into the center of the viewport.
const target = document.querySelector("#section-pricing");

if (target && typeof target.scrollIntoView === "function") {
  target.scrollIntoView({
    behavior: "smooth", // animate the scroll instead of jumping
    block: "center",    // align vertically in the middle of the viewport
    inline: "nearest",  // leave the horizontal axis alone unless needed
  });
} else {
  console.warn("scrollIntoView is not supported in this browser.");
}

If the page does not move, log the target first; scrollIntoView quietly returns when the target is null, detached from the DOM, or hidden with display: none.

Why is scrollIntoView not working?

scrollIntoView covers most cases, but a handful of edge cases catch teams off guard, especially around iOS Safari, fixed headers, and nested scroll containers.

• iOS Safari ignores smooth before 16: Safari on iOS 5 to 15.8 jumps directly to the target even when behavior: "smooth" is set. The smooth animation only fires reliably from Safari 16 on iOS, so older iPhones either jump or stall mid-scroll.
• Fixed headers cover the target: scrollIntoView does not subtract a header offset, so the element lands underneath a sticky header. Add scroll-margin-top: 80px (or your header height) on the target to push the final position below the header without writing custom math.
• Detached or hidden elements silently fail: The method returns undefined when the target is null, removed from the DOM, or hidden with display: none. Run console.log on the target before calling scrollIntoView to confirm the node is present.
• Nested scroll containers scroll the wrong axis: When several ancestors can scroll, the browser scrolls each one in turn. Pass inline: "nearest" to keep the horizontal axis still and limit motion to the vertical scroll, especially inside drag-and-drop kanban boards.
• In my experience, late DOM mounts break the call: React, Vue, and Angular often render the target inside an effect that runs after the initial scroll attempt, so the call hits a stale ref. Wrap scrollIntoView in requestAnimationFrame or a useEffect with the target ref so the browser waits for layout before scrolling.
• JSDOM does not implement the method: Jest tests that render with JSDOM throw scrollIntoView is not a function because the test runtime ships an empty stub. Mock Element.prototype.scrollIntoView with jest.fn() in your setup file to silence the error.

Citations

All scrollIntoView version numbers and platform notes in this guide come from these primary sources:

• MDN - Element.scrollIntoView(): developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
• MDN - Element.scrollIntoViewIfNeeded(): developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded
• MDN - ScrollIntoViewOptions: developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#parameters
• W3C - CSSOM View Module: w3.org/TR/cssom-view-1/
• CSSWG - CSSOM View editor's draft: drafts.csswg.org/cssom-view/
• Mozilla - Firefox 36 release notes: mozilla.org/en-US/firefox/36.0/releasenotes/
• Chrome Platform Status - scrollIntoViewOptions: chromestatus.com/feature/5697423933112320
• WebKit - Safari 15.4 release notes: webkit.org/blog/12445/new-webkit-features-in-safari-15-4/
• Chrome for Developers - Smooth scrolling: developer.chrome.com/blog/smooth-scrolling-in-chromium
• web.dev - Scroll to an element: web.dev/articles/smooth-scrolling-with-css-scroll-behavior