CSS outermost layer does not scroll, inner layer scrolls
CSS outermost layer does not scroll, inner scrolls
When implementing a scrolling content area on a webpage, we typically consider two scenarios: one for scrolling the entire page, and the other for scrolling the inner area. In this article, we’ll discuss how to use CSS to achieve a non-scrolling outermost layer and scrollable inner areas.
Method 1: Using Fixed Height and Overflow Properties
First, we can use a fixed-height div element to wrap the entire content area, then use the overflow property to enable scrolling within the inner area. The specific steps are as follows:
- In div element that wraps the entire content area and sets a fixed height and
overflow: autoattribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="scroll-wrapper">
<div class="content">
<!-- Your content goes here -->
</div>
</div>
</body>
</html>
- Set the outer
divstyle in the CSS file, including a fixed height and theoverflow: autoproperty to display a scroll bar when the inner content overflows.
.scroll-wrapper {
height: 300px; /* Set a fixed height */
overflow: auto; /* Set overflow properties */
}
.content {
/* Your content styles go here */
}
By following these steps, we can achieve a scrollable outer layer while maintaining a scrollable inner area. When enough content is added to content, a scrollbar will appear in the inner area, while the outer area will maintain a fixed height and remain scrollable.
Method 2: Using Positioning and Overflow Properties
In addition to using a fixed-height div element, we can also use absolute positioning to achieve a scrollable outermost layer while allowing the inner area to scroll. The specific steps are as follows:
- In the HTML file, define an absolutely positioned
divelement to wrap the entire content area and set theoverflow: autoattribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="scroll-wrapper">
<div class="content">
<!-- Your content goes here -->
</div>
</div>
</body>
</html>
- In CSS In the file, we style the outer
div, using absolute positioning and theoverflow: autoproperty to achieve the effect.
.scroll-wrapper {
position: absolute; /* Set absolute positioning */
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: auto; /* Set overflow properties */
}
.content {
/* Your content styles go here */
}
Through the above steps, we can also achieve the effect of the outer layer not scrolling but the inner area being scrollable. Whether using fixed height or absolute positioning, you can choose the appropriate method to achieve page scrolling based on your needs.
In general, through appropriate CSS style settings, we can easily achieve a non-scrolling outermost layer while allowing inner areas to scroll, improving the interactive experience and user-friendliness of the page.