Element: scrollIntoViewIfNeeded() method

Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.

The Element.scrollIntoViewIfNeeded() method scrolls the current element into the visible area of the browser window if it's not already within the visible area of the browser window. If the element is already within the visible area of the browser window, then no scrolling takes place. This method is a proprietary variation of the standard Element.scrollIntoView() method.

Syntax

scrollIntoViewIfNeeded()
scrollIntoViewIfNeeded(centerIfNeeded)

Parameters

centerIfNeeded Optional

An optional boolean value with a default of true:

If true, the element will be aligned so it is centered within the visible area of the scrollable ancestor.
If false, the element will be aligned to the nearest edge of the visible area of the scrollable ancestor. Depending on which edge of the visible area is closest to the element, either the top of the element will be aligned to the top edge of the visible area, or the bottom edge of the element will be aligned to the bottom edge of the visible area.

Return value

None (undefined).

Examples

const element = document.getElementById("my-el");

element.scrollIntoViewIfNeeded(); // Centers the element in the visible area
element.scrollIntoViewIfNeeded(false); // Aligns the element to the nearest edge in the visible area

Specifications

Not part of any specification. This is a proprietary, WebKit-specific method.

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`scrollIntoViewIfNeeded` Non-standard	Chrome – Full support Chrome 1 (Release date: 2008-12-11) footnote Full support	Edge – Full support Edge 79 (Release date: 2020-01-15) footnote Full support	Firefox – No support Firefox footnote footnote See bug 403510	Opera – Full support Opera 15 (Release date: 2013-07-02) footnote Full support	Safari – Full support Safari 3 (Release date: 2007-10-26) footnote Full support	Chrome Android – Full support Chrome Android 18 (Release date: 2012-06-27) footnote Full support	Firefox for Android – No support Firefox for Android footnote footnote See bug 403510	Opera Android – Full support Opera Android 14 (Release date: 2013-05-21) footnote Full support	Safari on iOS – Full support Safari on iOS 1 (Release date: 2007-06-29) footnote Full support	Samsung Internet – Full support Samsung Internet 1 (Release date: 2013-04-27) footnote Full support	WebView Android – Full support WebView Android 4.4 (Release date: 2013-12-09) footnote Full support	WebView on iOS – Full support WebView on iOS 1 (Release date: 2007-06-29) footnote Full support

Tip: you can click/tap on a cell for more information.

Full support: Full support
No support: No support
: Non-standard. Check cross-browser support before using.
: See implementation notes.