CSS floating display scroll bar
CSS Floating Scrollbar
In web development, you often encounter situations where you need to display scrollbars, especially when the content is too long. Sometimes, however, we want scrollbars to appear only when the mouse hovers over a certain area to reduce page clutter. In this article, we’ll detail how to use CSS to achieve scrollbars on hover.
Normal Scrollbars
First, let’s look at how scrollbars are displayed in normal situations. When the content of a div element exceeds its visible area, the browser automatically displays scrollbars. We can use the following simple HTML and CSS code to demonstrate this effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Bar</title>
<style>
.scroll {
width: 200px;
height: 200px;
overflow: auto;
border: 1px solid #ccc;
}
.content {
height: 400px;
background: #f9f9f9;
}
</style>
</head>
<body>
<div class="scroll">
<div class="content">
<!-- Padding to show scrollbar -->
</div>
</div>
</body>
</html>
In this code, we create a div element with a fixed width and height and assign it the overflow: auto; property. When the content exceeds the height of the div, a vertical scrollbar will automatically appear, allowing us to scroll through the entire content. Running the above code will show a div element with a scrollbar.
Show Scrollbar on Hover
Next, we’ll implement the scrollbar effect when hovering. We can achieve this using the :hover pseudo-class selector and the overflow-y: scroll; property in CSS. Modify the above code as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Bar on Hover</title>
<style>
.scroll {
width: 200px;
height: 200px;
overflow: hidden;
border: 1px solid #ccc;
}
.content {
height: 400px;
background: #f9f9f9;
}
.scroll:hover {
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="scroll">
<div class="content">
<!-- Fill content to display scrollbars -->
</div>
</div>
</body>
</html>
In this code, we set the overflow property of div.scroll to hidden, which initially disables the scrollbar. When the mouse hovers over the div, we set the overflow-y property to scroll using the :hover pseudo-class selector, which causes the vertical scrollbar to appear. Running the above code, you’ll notice that the scrollbar appears when the mouse hovers over the div.
Further Optimization
We can further optimize the hover scrollbar effect so that it doesn’t affect the content layout. We can use the padding-right property to leave a space for the vertical scroll bar, thereby preventing the page content from moving to the left as a whole when the scroll bar appears. The following is the optimized code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Improved Scroll Bar on Hover</title>
<style>
.scroll {
width: 200px;
height: 200px;
overflow: hidden;
border: 1px solid #ccc;
padding-right: 17px; /* Reserve space for scroll bar */
}
.content {
height: 400px;
background: #f9f9f9;
}
.scroll:hover {
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="scroll">
<div class="content">
<!-- Padding content to display scrollbars -->
</div>
</div>
</body>
</html>
In the above code, we added padding-right: 17px; to .scroll. This value is the default width of the scrollbar, ensuring sufficient space for the scrollbar and ensuring that it does not affect the content layout when the mouse hovers. Running the above code will show that the scrollbar appears without causing the content to move.
Through the above example code, we have achieved the effect of displaying scrollbars on mouse hover using CSS. This simple and effective method can improve the user experience and make the page look cleaner.