效果演示
Kapture 2024-12-27 at 10.13.54.gif
Kapture 2024-12-27 at 10.19.48.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>测试</title>
<style>
.box1 {
padding: 0.5em;
border-radius: 0.25rem;
background-color: hsl(260, 90%, 95%);
border: 1px dashed hsl(260, 90%, 65%);
height: 1000px;
}
.box2 {
height: 500px;
padding: 0.5em;
background-color: hsl(260, 90%, 85%);
border: 1px dashed hsl(260, 90%, 25%);
overflow-y: auto;
overscroll-behavior: contain;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<p>
使用 overscroll-behavior： contain
会将滚动隔离到包含的区域，从而防止在到达滚动边界后将其移动到父页面来继续滚动。这在导航链接的侧边栏等上下文中非常有用，导航链接的侧边栏可能具有独立于主页内容（可能是长文章或文档页面）的滚动。
</p>
<p>
使用 overscroll-behavior： contain
会将滚动隔离到包含的区域，从而防止在到达滚动边界后将其移动到父页面来继续滚动。这在导航链接的侧边栏等上下文中非常有用，导航链接的侧边栏可能具有独立于主页内容（可能是长文章或文档页面）的滚动。
</p>
<p>
使用 overscroll-behavior： contain
会将滚动隔离到包含的区域，从而防止在到达滚动边界后将其移动到父页面来继续滚动。这在导航链接的侧边栏等上下文中非常有用，导航链接的侧边栏可能具有独立于主页内容（可能是长文章或文档页面）的滚动。
</p>
<p>
使用 overscroll-behavior： contain
会将滚动隔离到包含的区域，从而防止在到达滚动边界后将其移动到父页面来继续滚动。这在导航链接的侧边栏等上下文中非常有用，导航链接的侧边栏可能具有独立于主页内容（可能是长文章或文档页面）的滚动。
</p>
<p>
使用 overscroll-behavior： contain
会将滚动隔离到包含的区域，从而防止在到达滚动边界后将其移动到父页面来继续滚动。这在导航链接的侧边栏等上下文中非常有用，导航链接的侧边栏可能具有独立于主页内容（可能是长文章或文档页面）的滚动。
</p>
<p>
使用 overscroll-behavior： contain
会将滚动隔离到包含的区域，从而防止在到达滚动边界后将其移动到父页面来继续滚动。这在导航链接的侧边栏等上下文中非常有用，导航链接的侧边栏可能具有独立于主页内容（可能是长文章或文档页面）的滚动。
</p>
<p>
使用 overscroll-behavior： contain
会将滚动隔离到包含的区域，从而防止在到达滚动边界后将其移动到父页面来继续滚动。这在导航链接的侧边栏等上下文中非常有用，导航链接的侧边栏可能具有独立于主页内容（可能是长文章或文档页面）的滚动。
</p>
<p>
使用 overscroll-behavior： contain
会将滚动隔离到包含的区域，从而防止在到达滚动边界后将其移动到父页面来继续滚动。这在导航链接的侧边栏等上下文中非常有用，导航链接的侧边栏可能具有独立于主页内容（可能是长文章或文档页面）的滚动。
</p>
<p>
使用 overscroll-behavior： contain
会将滚动隔离到包含的区域，从而防止在到达滚动边界后将其移动到父页面来继续滚动。这在导航链接的侧边栏等上下文中非常有用，导航链接的侧边栏可能具有独立于主页内容（可能是长文章或文档页面）的滚动。
</p>
<p>
使用 overscroll-behavior： contain
会将滚动隔离到包含的区域，从而防止在到达滚动边界后将其移动到父页面来继续滚动。这在导航链接的侧边栏等上下文中非常有用，导航链接的侧边栏可能具有独立于主页内容（可能是长文章或文档页面）的滚动。
</p>
<p>
使用 overscroll-behavior： contain
会将滚动隔离到包含的区域，从而防止在到达滚动边界后将其移动到父页面来继续滚动。这在导航链接的侧边栏等上下文中非常有用，导航链接的侧边栏可能具有独立于主页内容（可能是长文章或文档页面）的滚动。
</p>
<p>
使用 overscroll-behavior： contain
会将滚动隔离到包含的区域，从而防止在到达滚动边界后将其移动到父页面来继续滚动。这在导航链接的侧边栏等上下文中非常有用，导航链接的侧边栏可能具有独立于主页内容（可能是长文章或文档页面）的滚动。
</p>
</div>
</div>
</body>
</html>
