1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

/* 平滑滚动基础 */

/* 1. 全局启用平滑滚动 */
html {
  scroll-behavior: smooth;
  /* 当你点击锚点链接时，页面会平滑滚动到目标位置 */
}

/* 2. 在特定容器上启用 */
.scroll-container {
  scroll-behavior: smooth;
  overflow-y: auto;
}

/* 3. 禁用平滑滚动（特殊情况）*/
.no-smooth-scroll {
  scroll-behavior: auto;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE html>
<html>
<head>
  <style>
    html {
      scroll-behavior: smooth;  /* 全站启用平滑滚动 */
    }
  </style>
</head>
<body>
  <!-- 点击这个链接，页面会平滑滚动到目标位置 -->
  <a href="#section2">跳到第二部分</a>

  <section id="section1">
    <h2>第一部分</h2>
    <p>滚动鼠标滚轮，页面会平滑滚动</p>
  </section>

  <section id="section2">
    <h2>第二部分</h2>
    <p>看，页面是不是像滑梯一样平滑地滑下来了？</p>
  </section>
</body>
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

/* 1. 单页应用（SPA）的锚点跳转 */
html {
  scroll-behavior: smooth;
}

/* 2. 回到顶部按钮 */
/* 注意：scroll-behavior 要加在"滚动容器"上才生效。
   视口这个滚动容器对应的是根元素（html），
   所以回到顶部按钮自己写 scroll-behavior 是没用的——按钮又不滚。 */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  /* ❌ 在这里写 scroll-behavior: smooth; 是无效的
     ✅ 正确做法是把 smooth 设在 html 上，或用 JS 传 behavior: 'smooth' */
}

/* 3. Tab 切换内容区 */
.tab-content {
  scroll-behavior: smooth;
  overflow-y: auto;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

/* 默认平滑；用户系统开启"减弱动态效果"时自动关闭 */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* 或者反过来写：先给 smooth，再用媒体查询关掉 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

 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
38
39
40
41

// JavaScript 中使用平滑滚动

// 获取要滚动到的元素
const targetElement = document.getElementById('section2');

// 方法1：默认（behavior 默认是 'auto'）
targetElement.scrollIntoView();
// 注意：'auto' 不是"一定瞬间跳转"！如果这个元素（或其滚动容器的计算值）
// 上有 scroll-behavior: smooth，'auto' 也会变成平滑滚动。

// 方法1.5：传布尔值 —— false 等同于"对齐到元素底部"
targetElement.scrollIntoView(false);  // block: 'end'，元素底边贴住容器底边

// 方法2：平滑滚动
targetElement.scrollIntoView({
  behavior: 'smooth'
});

// 方法3：滚动到元素顶部
targetElement.scrollIntoView({
  behavior: 'smooth',
  block: 'start'  // 'start'/'center'/'end'/'nearest'
});

// 方法4：滚动到元素并水平对齐
targetElement.scrollIntoView({
  behavior: 'smooth',
  inline: 'start'  // 'start'/'center'/'end'/'nearest'
});

// 方法5：完整API
targetElement.scrollIntoView({
  behavior: 'auto',          // 'auto' | 'instant' | 'smooth'
  block: 'start',            // 'start' | 'center' | 'end' | 'nearest'（默认 'start'）
  inline: 'nearest'          // 'start' | 'center' | 'end' | 'nearest'（默认 'nearest'）
});

// 方法6：强制"瞬间"跳转
// 即使 CSS 里写了 scroll-behavior: smooth，'instant' 也会无视它直接跳过去，
// 适合"页面加载时先瞬间定位到锚点，之后再平滑"这类需求。
document.getElementById('section2').scrollIntoView({ behavior: 'instant' });

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// 实际应用：回到顶部按钮
const backToTopBtn = document.getElementById('backToTop');

backToTopBtn.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'  // 平滑滚动回顶部（推荐写法）
  });
});

// 另一种写法：把根元素滚进视野
backToTopBtn.addEventListener('click', () => {
  // ✅ 用 documentElement（标准模式下真正的滚动元素）
  document.documentElement.scrollIntoView({
    behavior: 'smooth',
    block: 'start'
  });

  // ❌ 不建议用 document.body.scrollIntoView()：
  //    body 有 margin 时可能滚不到真正的最顶部，
  //    某些情况下视口的滚动元素是 html 而不是 body。
  //    想要"绝对顶部"就用上面的 window.scrollTo({ top: 0 })，
  //    想拿滚动元素本身可以用 document.scrollingElement。
});

 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

// 兼容性写法
function smoothScrollTo(element) {
  if ('scrollBehavior' in document.documentElement.style) {
    // 浏览器支持 smooth，直接用
    element.scrollIntoView({ behavior: 'smooth' });
  } else {
    // 降级方案：使用 setTimeout 模拟平滑
    const targetY = element.offsetTop;
    const startY = window.scrollY;   // window.pageYOffset 是旧的别名，已不推荐
    const duration = 500;  // 500ms
    const startTime = performance.now();

    function step(currentTime) {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / duration, 1);
      const easeProgress = progress * (2 - progress);  // 缓动函数

      window.scrollTo(0, startY + (targetY - startY) * easeProgress);

      if (progress < 1) {
        requestAnimationFrame(step);
      }
    }

    requestAnimationFrame(step);
  }
}

 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

/* 自定义滚动条基础样式 */

/* 整体样式（宽高、圆角）*/
.custom-scrollbar {
  /* ⚠️ 先别急着抄这两个标准属性，看下面的"二选一"提醒 */
  scrollbar-width: thin;           /* 标准属性：auto | thin | none */
  scrollbar-color: #888 #f1f1f1;   /* 标准属性：滑块色 轨道色 */
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;   /* 滚动条宽度 */
  height: 8px;  /* 滚动条高度 */
}

/* 轨道（背景）*/
.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;  /* 轨道背景色 */
  border-radius: 4px;   /* 圆角 */
}

/* 滑块（可拖动部分）*/
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #888;   /* 滑块颜色 */
  border-radius: 4px;  /* 圆角 */
  transition: background 0.2s;  /* hover 效果 */
}

/* hover 状态 */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555;  /* 鼠标悬停时滑块变深 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<div class="custom-scrollbar" style="height: 300px; overflow-y: auto;">
  <p>滚动我！</p>
  <p>你会发现滚动条变好看了！</p>
  <p>这是一个自定义滚动条的演示区域</p>
  <p>内容足够多才会出现滚动条</p>
  <p>内容1</p>
  <p>内容2</p>
  <p>内容3</p>
  <p>内容4</p>
  <p>内容5</p>
  <p>内容6</p>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/* 滚动条的组成部分（不常用，但有时需要）*/
.full-scrollbar::-webkit-scrollbar-button {
  /* 两端的箭头按钮（很多平台上没有这个部件）*/
  display: none;
}

.full-scrollbar::-webkit-scrollbar-track-piece {
  /* 轨道里"没有被滑块盖住"的那部分 */
  background: #fafafa;
}

.full-scrollbar::-webkit-scrollbar-corner {
  /* 横竖滚动条交汇处的那个小方块 */
  background: #eee;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/* 轨道样式 */

/* 基础轨道 */
.styled-track::-webkit-scrollbar-track {
  background: #f0f0f0;  /* 轨道背景 */
}

/* 有内边距的轨道 */
.padded-track::-webkit-scrollbar-track {
  background: #f9f9f9;
  padding: 2px;  /* 轨道内边距 */
}

/* 渐变轨道 */
.gradient-track::-webkit-scrollbar-track {
  background: linear-gradient(to right, #f0f0f0, #e0e0e0);
}

/* 有圆角的轨道 */
.rounded-track::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

 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

/* 滑块样式 */

/* 基础滑块 */
.styled-thumb::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

/* hover 效果 */
.hover-thumb::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 更粗的滑块 */
.thick-thumb::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 8px;
}

/* 渐变滑块 */
.gradient-thumb::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3498db, #2980b9);
  border-radius: 4px;
}

/* 滑块悬停效果 */
.interactive-thumb::-webkit-scrollbar-thumb {
  background: #3498db;
  transition: background 0.2s;
}

.interactive-thumb::-webkit-scrollbar-thumb:hover {
  background: #2980b9;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

/* 标准属性写法（推荐优先用这套） */

/* scrollbar-width: auto | thin | none */
.thin-scrollbar {
  scrollbar-width: thin;           /* 更细的滚动条 */
  scrollbar-color: #888 #f1f1f1;   /* 滑块色 轨道色 */
}

/* none：滚动条"不可见"，但仍然可以滚动
   （⚠️ 只是看不见，内容依然能滚；这也是很多教程里"隐藏滚动条但保留滚动"的写法）*/
.hidden-scrollbar {
  scrollbar-width: none;
}

1
2
3
4
5
6
7
8
9

/* 隐藏滚动条，但内容仍然可以滚动（移动端常见的横向滚动列表）*/
/* 注意：滚动条没了会削弱"这里可以滚"的提示，无障碍上要谨慎 */
.hide-scrollbar {
  scrollbar-width: none;          /* Firefox / 新版 Chromium */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;                  /* 旧版 Chromium / WebKit */
}

 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

/* scrollbar-color 语法 */

/* 滑块颜色 轨道颜色 */
.colored-scrollbar {
  scrollbar-color: #3498db #f1f1f1;
  /* 滑块是蓝色，轨道是浅灰色 */
}

/* ⚠️ scrollbar-color 的值只有两种：auto，或者"两个颜色"
   想只改滑块颜色是做不到的，必须把轨道颜色也一起给出 */
/* .thumb-only { scrollbar-color: #3498db auto; }  ❌ 这是无效值 */

/* 恢复默认 */
.default-scrollbar {
  scrollbar-color: auto;
}

/* 常见颜色组合 */
.blue-scrollbar {
  scrollbar-color: #3498db #e8f4fc;
}

.green-scrollbar {
  scrollbar-color: #2ecc71 #e8f8f5;
}

.purple-scrollbar {
  scrollbar-color: #9b59b6 #f4ecf7;
}

/* 深色主题滚动条 */
.dark-scrollbar {
  scrollbar-color: #555 #2c2c2c;
  /* 滑块深灰，轨道更深灰 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* 滚动快照容器 */
.scroll-snap-container {
  /* ① 容器必须"能滚"（是个滚动容器），否则吸附无从谈起 */
  overflow-y: auto;
  height: 300px;             /* 有确定高度，内容才会溢出、才会出现滚动 */

  /* ② 语法：scroll-snap-type: <轴向> <严格程度> */
  scroll-snap-type: y mandatory;
  /*   轴向：none（关闭）| x | y | block | inline | both
     严格程度：mandatory（必须停在吸附点）| proximity（接近时才吸附，默认值）*/
}

1
2
3
4
5

<div class="scroll-snap-container">
  <section class="snap-item">第1页</section>
  <section class="snap-item">第2页</section>
  <section class="snap-item">第3页</section>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

/* 横向滚动的幻灯片/轮播 */
.carousel {
  display: flex;
  overflow-x: auto;
  height: 200px;
  scroll-snap-type: x mandatory;   /* 水平方向，强制吸附 */
  scroll-behavior: smooth;          /* 让"上一张/下一张"这类程序滚动也平滑 */
}

.carousel > .slide {
  flex: 0 0 100%;                   /* 每张幻灯片占满容器宽度 */
  scroll-snap-align: start;         /* 停靠时把它的左边缘对齐容器左边缘 */
  scroll-snap-stop: always;         /* 一次只能翻一张，不能"甩过头" */
}

1
2
3
4
5

<div class="carousel">
  <section class="slide">第 1 张</section>
  <section class="slide">第 2 张</section>
  <section class="slide">第 3 张</section>
</div>

 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

/* 每个快照项的吸附对齐 */

/* 默认：不参与吸附 */
.snap-none {
  scroll-snap-align: none;  /* 初始值，等价于"这个元素不提供吸附点" */
}

/* 吸附到起始边（左侧或顶部）*/
.snap-start {
  scroll-snap-align: start;
}

/* 吸附到结束边（右侧或底部）*/
.snap-end {
  scroll-snap-align: end;
}

/* 吸附到中心 */
.snap-center {
  scroll-snap-align: center;
}

/* 两个值：分别指定"块轴"和"行内轴"的对齐
   语法：scroll-snap-align: <块轴> <行内轴>?，只写一个时两轴相同 */
.snap-both-axes {
  scroll-snap-align: start center;
  /* 垂直滚动容器里：块轴 = 竖直方向 → start（顶边对齐）
     同时横向滚过来时：行内轴 = 水平方向 → center（水平居中）
     常见于"横向图片画廊，垂直方向也要顶部对齐"的场景 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

/* 强制停在每个快照点 */
.must-stop {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* 即使一次擦动很快、惯性很大，也必须在下一个吸附点停下，
     不能"一路滑过"三四张幻灯片 */
}

/* 可以跳过快照点（默认）*/
.can-skip {
  scroll-snap-align: start;
  scroll-snap-stop: normal;  /* 初始值：允许一次滑过多个吸附点 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/* scroll-padding 示例 */

/* 滚动容器内边距 */
.snap-container {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* 吸附位置距离边缘留出空间 */
  scroll-padding: 20px;
}

/* 只设置某一边 */
.one-side-padding {
  scroll-padding-top: 40px;   /* 顶部留40px空间 */
  scroll-padding-bottom: 20px;  /* 底部留20px空间 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* scroll-margin 示例 */

/* 每个滚动项目的外边距 */
.snap-item {
  scroll-snap-align: start;
  scroll-margin: 10px;  /* 吸附位置会考虑这个边距 */
}

/* 只设置某一边 */
.first-item {
  scroll-margin-left: 30px;  /* 左边距30px */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

/* scrollbar-gutter 解决布局抖动 */

/* ① 默认行为：没滚动条就不留空 */
.default-gutter {
  scrollbar-gutter: auto;
  overflow-y: auto;
}

/* ② stable：即使内容没溢出，也把滚动条的位置留出来 */
/*    场景：站点里有的页面长、有的页面短，靠它保证各页面内容宽度一致 */
.stable-layout {
  scrollbar-gutter: stable;
  overflow-y: auto;   /* 必须声明 overflow，否则这个盒子根本不是滚动容器 */
}

/* ③ stable both-edges：两侧各留一半，视觉上保持居中 */
.centered-layout {
  scrollbar-gutter: stable both-edges;
  overflow-y: auto;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

/* overscroll-behavior 示例 */

/* 禁止滚动链：子容器滚到底不带动父容器 */
.no-chain {
  overflow-y: auto;              /* ⚠️ 必须是滚动容器才有意义 */
  overscroll-behavior-y: contain;
  /* 滚到底后不再带动父容器滚动，
     但保留"本地回弹/发光"这类 overscroll 反馈效果 */
}

/* 默认行为：允许滚动链，也允许本地反馈效果 */
.with-chain {
  overscroll-behavior: auto;
}

/* contain + 连本地反馈效果一起禁掉（iOS 橡皮筋、下拉刷新、滑动返回都可能被抑制）*/
.no-bounce {
  overscroll-behavior: none;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* 分别控制两个方向 */

/* 禁止水平滚动链 */
.no-x-chain {
  overscroll-behavior-x: contain;
}

/* 允许垂直滚动链 */
.allow-y-chain {
  overscroll-behavior-y: auto;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/* 缩写：只写一个值 = 两个方向都是 contain */
.both-contain {
  overscroll-behavior: contain;
}

/* 缩写：两个值 = 横轴 contain、纵轴 none */
.mixed {
  overscroll-behavior: contain none;
}

/* 逻辑方向版本（跟随书写模式，横排中文/英文下与物理方向一致）*/
.logical {
  overscroll-behavior-inline: contain;  /* 行内方向（横排 ≈ 水平）*/
  overscroll-behavior-block: none;      /* 块级方向（横排 ≈ 垂直）*/
}