Javascript scrollIntoView() method
The scrollIntoView is a Javascript method that allows you to scroll an element into the viewport smoothly. It makes the element visible if it’s not already in visible viewport. It will be useful when you have some content, that will be brought into the view when user performs some action or with an animation effect.
The scrollIntoView method is a part of the Element interface in the Document Object Model (DOM).
element.scrollIntoView();
element.scrollIntoView([scrollIntoViewOptions]);There are 2 types of syntax available for scrollIntoView .
1. element.scrollIntoView();
This method is used to scroll the element into view with default options.
It will be scrolling to the top of its containing element or the viewport if it’s not already visible.
2. element.scrollIntoView([scrollIntoViewOptions]);
scrollInotViewOptions this is an optional object property that specifies the different options for scrolling the element in the viewport.
It has the following properties,
i. behavior
This property is used to define the behavior of the scroll with the below types.
Possible values are
- auto(default): to scroll the element as default based on scroll behavior.
- smooth: to scroll the elements with smooth and animated.
- instant: to scroll elements instantly, same as a single jump.
ii. block :
This property is used to define the vertical alignment of elements within the visible area.
Possible values are
- start(default): to scroll the elements at the starting position.
- center: scroll the elements at the center.
- end: scroll the elements at the end.
- nearest: scroll to the nearest edge vertically.
iii. inline :
This property is used to define the horizontal alignment of the elements within the visible area.
Possible values are
- start(default): to scroll the elements at the starting position.
- center: scroll the elements at the center.
- end: scroll the elements at the end.
- nearest: scroll to the nearest edge horizontally.
Examples
Here I have created 3 examples respective to different properties combinations of scrollIntoView.
1 .scrollIntoView() Default
This will scroll the element to the visible viewpoint.
<!DOCTYPE html>
<html>
<style>
#container {
height: 250px;
overflow: auto;
}
#scroll-div {
margin: 500px;
height: 800px;
background-color: pink;
}
</style>
<body>
<h1>Javascript scrollIntoView</h1>
<button onclick="myFunction()">Click to scroll the element</button>
<div id="container">
<div id="scroll-div">
<p>Text1</p>
<p>Text2</p>
<p>Text3</p>
</div>
</div>
<script>
function myFunction() {
const element = document.getElementById('scroll-div');
element.scrollIntoView();
}
</script>
</body>
</html>2. scrollIntoView() Vertically
This will scroll the element vertically into the visible viewpoint.
<!DOCTYPE html>
<html>
<style>
#scroll-div {
margin-top: 100px;
padding-right: 100%;
height: 800px;
background-color: pink;
overflow: auto;
}
</style>
<body>
<h1>Javascript scrollIntoView</h1>
<button onclick="myFunction()">Click to scroll the element</button>
<div id="scroll-div">Text</div>
<script>
function myFunction() {
const element = document.getElementById('scroll-div');
element.scrollIntoView({
behavior: 'smooth',
block: 'end',
inline: 'nearest',
});
}
</script>
</body>
</html>3 .scrollIntoView() Horizontally
This will scroll the element horizontally into the visible viewpoint.
<!DOCTYPE html>
<html>
<style>
#scroll-div {
margin-left: 100%;
padding-right: 100%;
height: 800px;
background-color: pink;
overflow: auto;
}
</style>
<body>
<h1>Javascript scrollIntoView</h1>
<button onclick="myFunction()">Click to scroll the element</button>
<div id="scroll-div">Text</div>
<script>
function myFunction() {
const element = document.getElementById('scroll-div');
element.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'start',
});
}
</script>
</body>
</html>NOTE: The scrollIntoView method highly deepened on the CSS of the element. If you have provided valid CSS into the element based on the spacing for the scroll then only it will work as expected.
Thank You for reading this article. Hope this article will help you element scroll.
