Klein's-blue的博客

记录生活，分享技术

0%

滚动与溢出

CSS 滚动与溢出（2025-2026 实用核心知识）

1. overflow 家族属性对比（最常用）

属性 作用描述 水平溢出 垂直溢出 常用场景 2025-2026 推荐度
overflow: visible 默认，内容溢出照样显示，不裁剪 — — 默认状态 ★★★☆
overflow: hidden 裁剪溢出内容，不显示滚动条 ✓ ✓ 卡片裁剪、创建 BFC、遮罩效果 ★★★★★
overflow: auto 内容溢出时才出现滚动条 ✓ ✓ 最常用：表格、聊天列表、侧边栏 ★★★★★
overflow: scroll 一直显示滚动条（即使内容不溢出也占位） ✓ ✓ 固定宽度高度区域、避免布局跳动 ★★★★☆
overflow-x / overflow-y 分别控制水平/垂直方向 单独控制 单独控制 水平滚动图片列表、只允许垂直滚动 ★★★★

现代最常用组合（强烈推荐）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* 经典：内容溢出自动滚动 + 美观隐藏多余滚动条 */
.scroll-container {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;        /* 移动端丝滑滚动（iOS必加） */
  scrollbar-width: thin;                    /* Firefox 细滚动条 */
  scrollbar-color: #888 transparent;        /* Firefox 颜色 */
}

/* WebKit 浏览器（Chrome/Edge/Safari）自定义细滚动条 */
.scroll-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scroll-container::-webkit-scrollbar-track {
  background: transparent;
}

.scroll-container::-webkit-scrollbar-thumb {
  background: rgba(100,100,100,0.4);
  border-radius: 3px;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background: rgba(100,100,100,0.6);
}

2. 平滑滚动（scroll-behavior）

1
2
3
4
5
6
7
8
9
/* 页面级平滑滚动（最常用） */
html {
  scroll-behavior: smooth;
}

/* 局部容器平滑滚动（2025+ 常用） */
.scroll-smooth {
  scroll-behavior: smooth;
}

使用场景：

  • 锚点跳转（#section）
  • 平滑回到顶部
  • 横向滚动 Tab 切换
  • 滚动到评论区/指定位置

注意：

  • scroll-behavior: smooth 不会影响 scrollTo() 或 scrollIntoView() 的 behavior: ‘smooth’
  • 移动端表现良好，但部分老浏览器不支持（可优雅降级）

3. 滚动捕获与动效提示（2025-2026 流行做法）

3.1 常见滚动动效提示方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 1. 滚动到底部/顶部渐变遮罩提示 */
.scroll-gradient {
  position: relative;
  overflow-y: auto;
  background: linear-gradient(
    to bottom,
    white 0%,
    white 30%,
    transparent 50%,
    transparent 50%,
    white 70%,
    white 100%
  ); /* 伪装渐变，实际内容遮罩 */
}

/* 2. 更现代：使用 ::before / ::after 做指示器 */
.scroll-indicator-top,
.scroll-indicator-bottom {
  position: sticky;
  left: 0;
  right: 0;
  height: 12px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.15), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.scroll-indicator-bottom {
  bottom: 0;
  transform: rotate(180deg);
}

/* 通过 JS 判断是否显示（或使用 IntersectionObserver） */
.scroll-container:has(.scroll-indicator-top) .scroll-indicator-top {
  opacity: 1;
}

3.2 滚动吸附（scroll-snap）—— 2025+ 非常流行

1
2
3
4
5
6
7
8
9
10
11
/* 轮播/卡片列表/全屏滑动常用 */
.snap-container {
  scroll-snap-type: y mandatory;      /* 垂直强制吸附 */
  /* 或 */
  scroll-snap-type: x proximity;      /* 水平接近吸附 */
}

.snap-item {
  scroll-snap-align: start;           /* 开始对齐 */
  /* 或 center / end */
}

推荐组合（手机端 H5 常见）：

1
2
3
4
5
6
7
8
9
10
11
.fullpage-snap {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.section {
  height: 100vh;
  scroll-snap-align: start;
}

4. 快速决策表（工作中最常问自己）

需求场景 推荐方案 补充技巧
内容溢出自动出现滚动条 overflow-y: auto + -webkit-overflow-scrolling: touch
想要一直显示细滚动条 overflow: scroll + 自定义 ::-webkit-scrollbar scrollbar-width: thin
锚点/回到顶部要平滑 html { scroll-behavior: smooth } + scrollIntoView({behavior: “smooth”})
横向滚动的图片/卡片列表 overflow-x: auto + white-space: nowrap + scroll-snap-type: x proximity
全屏滑动/手机端 H5 长页 scroll-snap-type: y mandatory + height: 100vh + scroll-behavior
底部有”加载更多”渐变提示 ::after + position: sticky + 渐变背景 IntersectionObserver 监听
避免 iOS 滚动卡顿 -webkit-overflow-scrolling: touch 几乎所有移动端滚动容器必加

需求场景推荐方案补充技巧内容溢出自动出现滚动条overflow-y: auto+ -webkit-overflow-scrolling: touch想要一直显示细滚动条overflow: scroll + 自定义 ::-webkit-scrollbarscrollbar-width: thin锚点/回到顶部要平滑html { scroll-behavior: smooth }+ scrollIntoView({behavior: “smooth”})横向滚动的图片/卡片列表overflow-x: auto + white-space: nowrap+ scroll-snap-type: x proximity全屏滑动/手机端 H5 长页scroll-snap-type: y mandatory+ height: 100vh + scroll-behavior底部有“加载更多”渐变提示::after + position: sticky + 渐变背景IntersectionObserver 监听避免 iOS 滚动卡顿-webkit-overflow-scrolling: touch几乎所有移动端滚动容器必加