CSS 最外层不滚动，里面滚动|极客教程

CSS 最外层不滚动，里面滚动

当我们在网页中需要实现一个内容滚动区域时，通常会考虑到两种情况：一种是整个页面的滚动，另一种是内部区域的滚动。在本文中，我们将讨论如何使用 CSS 实现最外层不滚动，内部区域可以滚动的效果。

方法一：使用固定高度和溢出属性

首先，我们可以使用固定高度的 div 元素来包裹整个内容区域，然后利用 overflow 属性来实现内部区域的滚动。具体步骤如下：

在 HTML 文件中定义一个包裹整个内容区域的 div 元素，并设置固定高度和 overflow: auto 属性。

<!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>

在 CSS 文件中设置外层 div 的样式，包括固定高度和 overflow: auto 属性，让内部内容溢出时显示滚动条。

.scroll-wrapper {
    height: 300px; /* 设置固定高度 */
    overflow: auto; /* 设置溢出属性 */
}

.content {
    /* Your content styles go here */
}

通过以上步骤，我们就可以实现外层不滚动，内部区域可以滚动的效果。在 content 内添加足够多的内容时，内部区域会出现滚动条，而外部区域保持固定高度不滚动。

方法二：使用定位和溢出属性

除了使用固定高度的 div 元素，我们还可以使用绝对定位的方式来实现最外层不滚动，内部区域可以滚动的效果。具体步骤如下：

在 HTML 文件中定义一个绝对定位的 div 元素来包裹整个内容区域，并设置 overflow: auto 属性。

<!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>

在 CSS 文件中设置外层 div 的样式，使用绝对定位和 overflow: auto 属性来实现效果。

.scroll-wrapper {
    position: absolute; /* 设置绝对定位 */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto; /* 设置溢出属性 */
}

.content {
    /* Your content styles go here */
}

通过以上步骤，我们同样可以实现外层不滚动，内部区域可以滚动的效果。无论是固定高度还是绝对定位，都可以根据实际需求来选择适合的方式来实现页面滚动效果。

总的来说，通过合适的 CSS 样式设置，我们可以轻松实现最外层不滚动，内部区域可以滚动的效果，提升页面的交互体验和用户友好性。