CSS setting scroll bar position
CSS Setting Scrollbar Position
In web development, scrollbars are an important element that enable users to navigate a page when the content exceeds the visible area. Sometimes we want to set the initial scrollbar position immediately when the page loads, or control the scrollbar position via scripts after user interaction. In this article, we’ll discuss how to set the scrollbar position using CSS.
Why Set the Scrollbar Position?
In some cases, we may want to control the initial scrollbar position immediately when the page loads. For example, if a webpage has multiple content blocks, each with its own scrollbar, we might want a particular block to appear at a specific position when the page loads. Or, in a single-page application, we might want the scrollbar to automatically scroll to the desired position after a user interaction triggers a specific event.
CSS method of setting scroll bar position
1. Using the scroll-behavior Property
The scroll-behavior property defines a scrolling transition, allowing the page to scroll smoothly to a specified position. Setting scroll-behavior: smooth; makes scrolling appear smoother.
html {
scroll-behavior: smooth;
}
2. Setting the Initial Scrollbar Position
To set the initial scrollbar position when the page loads, we can use the scrollLeft and scrollTop properties.
/* Default scrollbar position is top */
body {
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
/* Set initial scrollbar position */
body {
scroll-snap-type: none;
}
/* Set horizontal scrollbar */
div {
overflow-x: auto;
}
3. Controlling the scrollbar position with JavaScript
If you want to control the scrollbar position with scripting after user interaction, you can use JavaScript to implement it.
// Scroll to the top
window.scrollTo({
top: 0,
behavior: 'smooth'
});
// Scroll to the specified element
document.querySelector('.element').scrollIntoView({
behavior: 'smooth'
});
Example
Here is a simple example demonstrating how to use CSS and JavaScript controls the scroll bar position.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Position Example</title>
<style>
body {
scroll-behavior: smooth;
overflow-y: scroll;
height: 200px;
}
.content {
height: 1000px;
}
</style>
</head>
<body>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget nisl ac justo hendrerit tincidunt. sagittis. Sed ultricies nulla vitae massa feugiat, ac ullamcorper nulla malesuada.
</div>
<button onclick="scrollToTop()">Scroll to Top</button>
<button onclick="scrollToElement()">Scroll to Element</button>
<script>
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
function scrollToElement() {
document.querySelector('.content').scrollIntoView({
behavior: 'smooth'
});
}
</script>
</body>
</html>
In this example, when the page loads, the scroll bar defaults to the top position. Clicking the “Scroll to Top” button scrolls the page smoothly to the top; clicking the “Scroll to Element” button scrolls the page smoothly to the .content element.
Using the above methods, we can set the initial scrollbar position when the page loads, or control the scrollbar position through scripts after user interaction, making the page scrolling behavior more consistent with user expectations and experience.