The behavior
property of the ScrollToOptions
dictionary specifies whether the scrolling should animate smoothly, or happen instantly in a single jump.
This is actually defined on the ScrollOptions
dictionary, which is implemented by ScrollToOptions
.
Syntax
behavior: ScrollBehavior
Value
An enum, the value of which can be one of the following:
smooth
: The scrolling animates smoothly.auto
: The scrolling happens in a single jump.
Examples
In our scrolltooptions example (see it live) we include a form that allows the user to enter three values — two numbers representing the left and top properties (i.e. the positions to scroll to along the X and Y axes), and a checkbox indicating whether they want smooth scrolling enabled or not.
When the form is submitted, an event handler is run that puts the entered values into a ScrollToOptions dictionary, and then invokes the Window.ScrollTo()
method, passing the dictionary as a parameter:
form.addEventListener('submit', (e) => { e.preventDefault(); var scrollOptions = { left: leftInput.value, top: topInput.value, behavior: scrollInput.checked ? 'smooth' : 'auto' } window.scrollTo(scrollOptions); });
Specifications
Specification | Status | Comment |
---|---|---|
CSS Object Model (CSSOM) View Module The definition of 'behavior' in that specification. |
Working Draft |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
behavior | Chrome Full support 45 | Edge Full support 79 | Firefox Full support Yes | IE No support No | Opera Full support 32 | Safari
Full support
Yes
| WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android Full support Yes | Opera Android Full support 32 | Safari iOS
Full support
Yes
| Samsung Internet Android Full support 5.0 |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.
- See implementation notes.