Element.scrollIntoView()
The Element
interface's
scrollIntoView()
method scrolls the element's parent
container such that the element on which scrollIntoView()
is called is
visible to the user.
Syntax
element.scrollIntoView();
element.scrollIntoView(alignToTop); // Boolean parameter
element.scrollIntoView(scrollIntoViewOptions); // Object parameter
Parameters
alignToTop
Optional-
Is a boolean value:
-
If
true
, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. Corresponds toscrollIntoViewOptions: {block: "start", inline: "nearest"}
. This is the default value. -
If
false
, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor. Corresponds toscrollIntoViewOptions: {block: "end", inline: "nearest"}
.
-
If
-
scrollIntoViewOptions
Optional -
Is an Object with the following properties:
behavior
Optional-
Defines the transition animation. One of
auto
orsmooth
. Defaults toauto
. block
Optional-
Defines vertical alignment. One of
start
,center
,end
, ornearest
. Defaults tostart
. inline
Optional-
Defines horizontal alignment. One of
start
,center
,end
, ornearest
. Defaults tonearest
.
Example
var element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
Notes
The element may not be scrolled completely to the top or bottom depending on the layout of other elements.
Specifications
Specification |
---|
CSSOM View Module # dom-element-scrollintoview |
Browser compatibility
BCD tables only load in the browser