CSS overflow-x and overflow-y attributes are used to limit content overflow in the horizontal and vertical directions, respectively. The scrollbar may show on the page even when there is nothing to scroll when overflow-x is set to “visible” and overflow-y is set to “hidden”.
Syntax:
- For horizontal overflow:
overflow-x: visible | hidden | scroll | auto | initial | inherit;
- For vertical overflow:
overflow-y: visible | hidden | scroll | auto | initial | inherit;
Approach: To avoid the scrollbar issue caused by setting overflow-x to “visible” and overflow-y to “hidden”, there are a few approaches that can be used.
- Using overflow: hidden instead of overflow-y: hidden: This will hide both the horizontal and vertical overflow and prevent the scrollbar from appearing unnecessarily.
- Using overflow-x: scroll instead of overflow-x: visible: This will only show the scrollbar when there is content to scroll horizontally and prevent it from appearing unnecessarily.
Example 1: This example demonstrates the first approach using overflow: hidden property.
<!DOCTYPE html> <html>
<head>
<title>Example with CSS overflow:hidden</title>
<style>
.container {
width: 300px;
height: 200px;
overflow: hidden;
}
.content {
width: 645px;
height: 300px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="container">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>CSS overflow hidden property</h3>
<div class="content">
This is the content which will
show overflowing text using CSS property.
</div>
</div>
</body>
</html>
|
Output:
Example 2: This example demonstrates the second approach using overflow-x: scroll property.
<!DOCTYPE html> <html>
<head>
<title>Example with overflow-x: scroll</title>
<style>
.container {
width: 300px;
height: 200px;
overflow-x: scroll;
overflow-y: hidden;
}
.content {
width: 645px;
height: 300px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="container">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3> CSS overflow-x: scroll </h3>
<div class="content">
This is the content which will
show overflowing-x scroll using
CSS property.
</div>
</div>
</body>
</html>
|
Output:
In conclusion, the CSS overflow-x: visible; and overflow-y: hidden; the combination can cause a scrollbar issue on the page. To avoid this, we can use either overflow: hidden or overflow-x: scroll instead.