Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 22 additions & 11 deletions files/en-us/web/api/element/scrollintoview/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ visible to the user.
```js-nolint
scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)
scrollIntoView(options)
```

### Parameters
Expand All @@ -33,29 +33,40 @@ scrollIntoView(scrollIntoViewOptions)
of the visible area of the scrollable ancestor. Corresponds to
`scrollIntoViewOptions: {block: "end", inline: "nearest"}`.

- `scrollIntoViewOptions` {{optional_inline}}
{{experimental_inline}}
- : An Object with the following properties:
- `options` {{optional_inline}}
- : An object with the following properties:
- `behavior` {{optional_inline}}
- : Determines whether scrolling is instant or animates smoothly. This option is a string which must take one of the following values:
- : Determines whether scrolling is instant or animates smoothly. Its value can be one of the following:
- `smooth`: scrolling should animate smoothly
- `instant`: scrolling should happen instantly in a single jump
- `auto`: scroll behavior is determined by the computed value of {{cssxref("scroll-behavior")}}

The default is `auto`.

- `block` {{optional_inline}}
- : Defines the vertical alignment of the element within the scrollable ancestor container. This option is a string and accepts one of the following values:
- : Defines the vertical alignment of the element within the scrollable ancestor container. Its value can be one of the following:
- `start`: Aligns the element's top edge with the top of the scrollable container, making the element appear at the start of the visible area vertically.
- `center`: Aligns the element vertically at the center of the scrollable container, positioning it in the middle of the visible area.
- `end`: Aligns the element's bottom edge with the bottom of the scrollable container, placing the element at the end of the visible area vertically.
- `nearest`: Scrolls the element to the nearest edge in the vertical direction. If the element is closer to the top edge of the scrollable container, it will align to the top; if it's closer to the bottom
edge, it will align to the bottom. This minimizes the scrolling distance.
- Defaults to `start`.
- `nearest`: Scrolls the element to the nearest edge in the vertical direction. If the element is closer to the top edge of the scrollable container, it will align to the top; if it's closer to the bottom edge, it will align to the bottom. This minimizes the scrolling distance.

The default is `start`.

- `container` {{optional_inline}}
- : Defines the scrollable ancestor container. Its value can be one of the following:
- `all`: All scrollable containers are impacted (including the viewport).
- `nearest`: Only the nearest scrollable container is impacted by the scroll.

The default is `all`.

- `inline` {{optional_inline}}
- : Defines the horizontal alignment of the element within the scrollable ancestor container. This option is a string and accepts one of the following values:
- : Defines the horizontal alignment of the element within the scrollable ancestor container. Its value can be one of the following:
- `start`: Aligns the element's left edge with the left of the scrollable container, making the element appear at the start of the visible area horizontally.
- `center`: Aligns the element horizontally at the center of the scrollable container, positioning it in the middle of the visible area.
- `end`: Aligns the element's right edge with the right of the scrollable container, placing the element at the end of the visible area horizontally.
- `nearest`: Scrolls the element to the nearest edge in the horizontal direction. If the element is closer to the left edge of the scrollable container, it will align to the left; if it's closer to the right edge, it will align to the right. This minimizes the scrolling distance.
- Defaults to `nearest`.

The default is `nearest`.

### Return value

Expand Down