滚动边距与填充属性详解

概述

本文档系统讲解滚动边距与填充属性详解中的各个属性。每个属性都配有来自 MDN 的可交互演示，可以直接点击运行查看效果。

scroll-margin 滚动外边距

scroll-margin

设置滚动吸附/锚点定位时元素周围的滚动外边距。

scroll-margin 交互演示（MDN）

设置滚动吸附/锚点定位时元素周围的滚动外边距。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-margin 属性演示 - MDN 示例</title>
    <meta name="description" content="演示scroll（margin 属性演示）效果。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .default-example .info {
        inline-size: 100%;
        padding: 0.5em 0;
        font-size: 90%;
        writing-mode: vertical-rl;
      }
 
      .scroller {
        text-align: left;
        height: 250px;
        width: 270px;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border: 1px solid black;
        scroll-snap-type: y mandatory;
      }
 
      .scroller > div {
        flex: 0 0 250px;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: start;
      }
 
      .scroller > div:nth-child(even) {
        background-color: #fff;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-margin: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-margin: 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-margin: 2em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller">
            <div>1</div>
            <div id="example-element">2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-margin: 0;
}`,
        `#example-element {
  scroll-margin: 20px;
}`,
        `#example-element {
  scroll-margin: 2em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>

scroll-margin-top

设置元素顶部的滚动外边距。

scroll-margin-top 交互演示（MDN）

设置元素顶部的滚动外边距。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-margin-top 属性演示 - MDN 示例</title>
    <meta name="description" content="演示scroll（margin-top 属性演示）效果。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .default-example .info {
        inline-size: 100%;
        padding: 0.5em 0;
        font-size: 90%;
        writing-mode: vertical-rl;
      }
 
      .scroller {
        text-align: left;
        height: 250px;
        width: 270px;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border: 1px solid black;
        scroll-snap-type: y mandatory;
      }
 
      .scroller > div {
        flex: 0 0 250px;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: start;
      }
 
      .scroller > div:nth-child(even) {
        background-color: #fff;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-margin-top: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-margin-top: 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-margin-top: 2em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller">
            <div>1</div>
            <div id="example-element">2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-margin-top: 0;
}`,
        `#example-element {
  scroll-margin-top: 20px;
}`,
        `#example-element {
  scroll-margin-top: 2em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>

scroll-margin-bottom

设置元素底部的滚动外边距。

scroll-margin-bottom 交互演示（MDN）

设置元素底部的滚动外边距。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-margin-bottom 属性演示 - MDN 示例</title>
    <meta name="description" content="演示scroll（margin-bottom 属性演示）效果。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .default-example .info {
        inline-size: 100%;
        padding: 0.5em 0;
        font-size: 90%;
        writing-mode: vertical-rl;
      }
 
      .scroller {
        text-align: left;
        height: 250px;
        width: 270px;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border: 1px solid black;
        scroll-snap-type: y mandatory;
      }
 
      .scroller > div {
        flex: 0 0 250px;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: end;
      }
 
      .scroller > div:nth-child(even) {
        background-color: #fff;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-margin-bottom: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-margin-bottom: 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-margin-bottom: 2em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller">
            <div>1</div>
            <div id="example-element">2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-margin-bottom: 0;
}`,
        `#example-element {
  scroll-margin-bottom: 20px;
}`,
        `#example-element {
  scroll-margin-bottom: 2em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>

scroll-margin-left

设置元素左侧的滚动外边距。

scroll-margin-left 交互演示（MDN）

设置元素左侧的滚动外边距。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-margin-left 属性演示 - MDN 示例</title>
    <meta name="description" content="演示scroll（margin-left 属性演示）效果。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .default-example {
        flex-wrap: wrap;
      }
 
      .default-example .info {
        width: 100%;
        padding: 0.5em 0;
        font-size: 90%;
      }
 
      .scroller {
        text-align: left;
        width: 250px;
        height: 250px;
        overflow-x: scroll;
        display: flex;
        box-sizing: border-box;
        border: 1px solid black;
        scroll-snap-type: x mandatory;
      }
 
      .scroller > div {
        flex: 0 0 250px;
        width: 250px;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: start;
      }
 
      .scroller > div:nth-child(even) {
        background-color: #fff;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-margin-left: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-margin-left: 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-margin-left: 2em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller">
            <div>1</div>
            <div id="example-element">2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-margin-left: 0;
}`,
        `#example-element {
  scroll-margin-left: 20px;
}`,
        `#example-element {
  scroll-margin-left: 2em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>

scroll-margin-right

设置元素右侧的滚动外边距。

scroll-margin-right 交互演示（MDN）

设置元素右侧的滚动外边距。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-margin-right 属性演示 - MDN 示例</title>
    <meta name="description" content="演示scroll（margin-right 属性演示）效果。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .default-example {
        flex-wrap: wrap;
      }
 
      .default-example .info {
        width: 100%;
        padding: 0.5em 0;
        font-size: 90%;
      }
 
      .scroller {
        text-align: left;
        width: 250px;
        height: 250px;
        overflow-x: scroll;
        display: flex;
        box-sizing: border-box;
        border: 1px solid black;
        scroll-snap-type: x mandatory;
      }
 
      .scroller > div {
        flex: 0 0 250px;
        width: 250px;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: end;
      }
 
      .scroller > div:nth-child(even) {
        background-color: #fff;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-margin-right: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-margin-right: 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-margin-right: 2em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller">
            <div>1</div>
            <div id="example-element">2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-margin-right: 0;
}`,
        `#example-element {
  scroll-margin-right: 20px;
}`,
        `#example-element {
  scroll-margin-right: 2em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>

scroll-margin-block

逻辑属性：块方向的滚动外边距。

scroll-margin-block 交互演示（MDN）

逻辑属性：块方向的滚动外边距。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-margin-block 属性演示 - MDN 示例</title>
    <meta name="description" content="演示scroll（margin-block 属性演示）效果。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .default-example .info {
        inline-size: 100%;
        padding: 0.5em 0;
        font-size: 90%;
        writing-mode: vertical-rl;
      }
 
      .scroller {
        text-align: left;
        height: 250px;
        width: 270px;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border: 1px solid black;
        scroll-snap-type: y mandatory;
      }
 
      .scroller > div {
        flex: 0 0 250px;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: start;
      }
 
      .scroller > div:nth-child(even) {
        background-color: #fff;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-margin-block: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-margin-block: 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-margin-block: 2em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller">
            <div>1</div>
            <div id="example-element">2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-margin-block: 0;
}`,
        `#example-element {
  scroll-margin-block: 20px;
}`,
        `#example-element {
  scroll-margin-block: 2em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>

scroll-margin-block-start

逻辑属性：块起始方向的滚动外边距。

scroll-margin-block-start 交互演示（MDN）

逻辑属性：块起始方向的滚动外边距。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-margin-block-start 属性演示 - MDN 示例</title>
    <meta name="description" content="演示scroll（margin-block-start 属性演示）效果。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .default-example .info {
        inline-size: 100%;
        padding: 0.5em 0;
        font-size: 90%;
        writing-mode: vertical-rl;
      }
 
      .scroller {
        text-align: left;
        height: 250px;
        width: 270px;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border: 1px solid black;
        scroll-snap-type: y mandatory;
      }
 
      .scroller > div {
        flex: 0 0 250px;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: start;
      }
 
      .scroller > div:nth-child(even) {
        background-color: #fff;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-margin-block-start: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-margin-block-start: 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-margin-block-start: 2em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller">
            <div>1</div>
            <div id="example-element">2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-margin-block-start: 0;
}`,
        `#example-element {
  scroll-margin-block-start: 20px;
}`,
        `#example-element {
  scroll-margin-block-start: 2em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>

scroll-margin-block-end

逻辑属性：块结束方向的滚动外边距。

scroll-margin-block-end 交互演示（MDN）

逻辑属性：块结束方向的滚动外边距。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-margin-block-end 属性演示 - MDN 示例</title>
    <meta name="description" content="演示scroll（margin-block-end 属性演示）效果。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .default-example .info {
        inline-size: 100%;
        padding: 0.5em 0;
        font-size: 90%;
        writing-mode: vertical-rl;
      }
 
      .scroller {
        text-align: left;
        height: 250px;
        width: 270px;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border: 1px solid black;
        scroll-snap-type: y mandatory;
      }
 
      .scroller > div {
        flex: 0 0 250px;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: end;
      }
 
      .scroller > div:nth-child(even) {
        background-color: #fff;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-margin-block-end: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-margin-block-end: 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-margin-block-end: 2em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller">
            <div>1</div>
            <div id="example-element">2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-margin-block-end: 0;
}`,
        `#example-element {
  scroll-margin-block-end: 20px;
}`,
        `#example-element {
  scroll-margin-block-end: 2em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>

scroll-margin-inline

逻辑属性：行方向的滚动外边距。

scroll-margin-inline 交互演示（MDN）

逻辑属性：行方向的滚动外边距。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-margin-inline 属性演示 - MDN 示例</title>
    <meta name="description" content="演示scroll（margin-inline 属性演示）效果。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .default-example {
        flex-wrap: wrap;
      }
 
      .default-example .info {
        width: 100%;
        padding: 0.5em 0;
        font-size: 90%;
      }
 
      .scroller {
        text-align: left;
        width: 250px;
        height: 250px;
        overflow-x: scroll;
        display: flex;
        box-sizing: border-box;
        border: 1px solid black;
        scroll-snap-type: x mandatory;
      }
 
      .scroller > div {
        flex: 0 0 250px;
        width: 250px;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: end;
      }
 
      .scroller > div:nth-child(even) {
        background-color: #fff;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-margin-inline: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-margin-inline: 40px 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-margin-inline: 4em 0;</button>
        <button class="snippet-btn" data-index="3">scroll-margin-inline: 0px 3em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller">
            <div>1</div>
            <div id="example-element">2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-margin-inline: 0;
}`,
        `#example-element {
  scroll-margin-inline: 40px 20px;
}`,
        `#example-element {
  scroll-margin-inline: 4em 0;
}`,
        `#example-element {
  scroll-margin-inline: 0px 3em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>

scroll-margin-inline-start

逻辑属性：行起始方向的滚动外边距。

scroll-margin-inline-start 交互演示（MDN）

逻辑属性：行起始方向的滚动外边距。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-margin-inline-start 属性演示 - MDN 示例</title>
    <meta name="description" content="演示scroll（margin-inline-start 属性演示）效果。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .default-example {
        flex-wrap: wrap;
      }
 
      .default-example .info {
        width: 100%;
        padding: 0.5em 0;
        font-size: 90%;
      }
 
      .scroller {
        text-align: left;
        width: 250px;
        height: 250px;
        overflow-x: scroll;
        display: flex;
        box-sizing: border-box;
        border: 1px solid black;
        scroll-snap-type: x mandatory;
      }
 
      .scroller > div {
        flex: 0 0 250px;
        width: 250px;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: start;
      }
 
      .scroller > div:nth-child(even) {
        background-color: #fff;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-margin-inline-start: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-margin-inline-start: 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-margin-inline-start: 2em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller">
            <div>1</div>
            <div id="example-element">2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-margin-inline-start: 0;
}`,
        `#example-element {
  scroll-margin-inline-start: 20px;
}`,
        `#example-element {
  scroll-margin-inline-start: 2em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>

scroll-margin-inline-end

逻辑属性：行结束方向的滚动外边距。

scroll-margin-inline-end 交互演示（MDN）

逻辑属性：行结束方向的滚动外边距。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-margin-inline-end 属性演示 - MDN 示例</title>
    <meta name="description" content="演示scroll（margin-inline-end 属性演示）效果。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .default-example {
        flex-wrap: wrap;
      }
 
      .default-example .info {
        width: 100%;
        padding: 0.5em 0;
        font-size: 90%;
      }
 
      .scroller {
        text-align: left;
        width: 250px;
        height: 250px;
        overflow-x: scroll;
        display: flex;
        box-sizing: border-box;
        border: 1px solid black;
        scroll-snap-type: x mandatory;
      }
 
      .scroller > div {
        flex: 0 0 250px;
        width: 250px;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: end;
      }
 
      .scroller > div:nth-child(even) {
        background-color: #fff;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-margin-inline-end: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-margin-inline-end: 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-margin-inline-end: 2em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller">
            <div>1</div>
            <div id="example-element">2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-margin-inline-end: 0;
}`,
        `#example-element {
  scroll-margin-inline-end: 20px;
}`,
        `#example-element {
  scroll-margin-inline-end: 2em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>

scroll-padding 滚动内边距

scroll-padding

设置滚动容器的滚动内边距，影响吸附与锚点定位位置。

scroll-padding 交互演示（MDN）

设置滚动容器的滚动内边距，影响吸附与锚点定位位置。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-padding 属性演示 - MDN 示例</title>
    <meta name="description" content="演示scroll（padding 属性演示）效果。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .default-example .info {
        inline-size: 100%;
        padding: 0.5em 0;
        font-size: 90%;
        writing-mode: vertical-rl;
      }
 
      .scroller {
        text-align: left;
        height: 250px;
        width: 270px;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border: 1px solid black;
        scroll-snap-type: y mandatory;
      }
 
      .scroller > div {
        flex: 0 0 250px;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: start;
      }
 
      .scroller > div:nth-child(even) {
        background-color: #fff;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-padding: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-padding: 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-padding: 2em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller" id="example-element">
            <div>1</div>
            <div>2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-padding: 0;
}`,
        `#example-element {
  scroll-padding: 20px;
}`,
        `#example-element {
  scroll-padding: 2em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>

scroll-padding-top

设置滚动容器顶部的滚动内边距。

scroll-padding-top 交互演示（MDN）

设置滚动容器顶部的滚动内边距。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-padding-top 属性演示 - MDN 示例</title>
    <meta name="description" content="滚动行为示例：scroll（padding-top 属性演示）。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-padding-top: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-padding-top: 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-padding-top: 2em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller" id="example-element">
            <div>1</div>
            <div>2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-padding-top: 0;
}`,
        `#example-element {
  scroll-padding-top: 20px;
}`,
        `#example-element {
  scroll-padding-top: 2em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>

scroll-padding-bottom

设置滚动容器底部的滚动内边距。

scroll-padding-bottom 交互演示（MDN）

设置滚动容器底部的滚动内边距。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-padding-bottom 属性演示 - MDN 示例</title>
    <meta name="description" content="演示scroll（padding-bottom 属性演示）效果。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .default-example .info {
        inline-size: 100%;
        padding: 0.5em 0;
        font-size: 90%;
        writing-mode: vertical-rl;
      }
 
      .scroller {
        text-align: left;
        height: 250px;
        width: 270px;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border: 1px solid black;
        scroll-snap-type: y mandatory;
      }
 
      .scroller > div {
        flex: 0 0 250px;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: end;
      }
 
      .scroller > div:nth-child(even) {
        background-color: #fff;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-padding-bottom: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-padding-bottom: 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-padding-bottom: 2em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller" id="example-element">
            <div>1</div>
            <div>2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-padding-bottom: 0;
}`,
        `#example-element {
  scroll-padding-bottom: 20px;
}`,
        `#example-element {
  scroll-padding-bottom: 2em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>

scroll-padding-left

设置滚动容器左侧的滚动内边距。

scroll-padding-left 交互演示（MDN）

设置滚动容器左侧的滚动内边距。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-padding-left 属性演示 - MDN 示例</title>
    <meta name="description" content="演示scroll（padding-left 属性演示）效果。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .default-example {
        flex-wrap: wrap;
      }
 
      .default-example .info {
        width: 100%;
        padding: 0.5em 0;
        font-size: 90%;
      }
 
      .scroller {
        text-align: left;
        width: 250px;
        height: 250px;
        overflow-x: scroll;
        display: flex;
        box-sizing: border-box;
        border: 1px solid black;
        scroll-snap-type: x mandatory;
      }
 
      .scroller > div {
        flex: 0 0 250px;
        width: 250px;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: start;
      }
 
      .scroller > div:nth-child(even) {
        background-color: #fff;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-padding-left: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-padding-left: 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-padding-left: 2em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller" id="example-element">
            <div>1</div>
            <div>2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-padding-left: 0;
}`,
        `#example-element {
  scroll-padding-left: 20px;
}`,
        `#example-element {
  scroll-padding-left: 2em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>

scroll-padding-right

设置滚动容器右侧的滚动内边距。

scroll-padding-right 交互演示（MDN）

设置滚动容器右侧的滚动内边距。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-padding-right 属性演示 - MDN 示例</title>
    <meta name="description" content="演示scroll（padding-right 属性演示）效果。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .default-example {
        flex-wrap: wrap;
      }
 
      .default-example .info {
        width: 100%;
        padding: 0.5em 0;
        font-size: 90%;
      }
 
      .scroller {
        text-align: left;
        width: 250px;
        height: 250px;
        overflow-x: scroll;
        display: flex;
        box-sizing: border-box;
        border: 1px solid black;
        scroll-snap-type: x mandatory;
      }
 
      .scroller > div {
        flex: 0 0 250px;
        width: 250px;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: end;
      }
 
      .scroller > div:nth-child(even) {
        background-color: #fff;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-padding-right: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-padding-right: 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-padding-right: 2em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller" id="example-element">
            <div>1</div>
            <div>2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-padding-right: 0;
}`,
        `#example-element {
  scroll-padding-right: 20px;
}`,
        `#example-element {
  scroll-padding-right: 2em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>

scroll-padding-block

逻辑属性：块方向的滚动内边距。

scroll-padding-block 交互演示（MDN）

逻辑属性：块方向的滚动内边距。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-padding-block 属性演示 - MDN 示例</title>
    <meta name="description" content="演示scroll（padding-block 属性演示）效果。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .default-example .info {
        inline-size: 100%;
        padding: 0.5em 0;
        font-size: 90%;
        writing-mode: vertical-rl;
      }
 
      .scroller {
        text-align: left;
        height: 250px;
        width: 270px;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border: 1px solid black;
        scroll-snap-type: y mandatory;
      }
 
      .scroller > div {
        flex: 0 0 250px;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: start;
      }
 
      .scroller > div:nth-child(even) {
        background-color: #fff;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-padding-block: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-padding-block: 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-padding-block: 2em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller" id="example-element">
            <div>1</div>
            <div>2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-padding-block: 0;
}`,
        `#example-element {
  scroll-padding-block: 20px;
}`,
        `#example-element {
  scroll-padding-block: 2em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>

scroll-padding-block-start

逻辑属性：块起始方向的滚动内边距。

scroll-padding-block-start 交互演示（MDN）

逻辑属性：块起始方向的滚动内边距。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-padding-block-start 属性演示 - MDN 示例</title>
    <meta name="description" content="演示scroll（padding-block-start 属性演示）效果。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .default-example .info {
        inline-size: 100%;
        padding: 0.5em 0;
        font-size: 90%;
        writing-mode: vertical-rl;
      }
 
      .scroller {
        text-align: left;
        height: 250px;
        width: 270px;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border: 1px solid black;
        scroll-snap-type: y mandatory;
      }
 
      .scroller > div {
        flex: 0 0 250px;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: start;
      }
 
      .scroller > div:nth-child(even) {
        background-color: #fff;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-padding-block-start: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-padding-block-start: 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-padding-block-start: 2em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller" id="example-element">
            <div>1</div>
            <div>2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-padding-block-start: 0;
}`,
        `#example-element {
  scroll-padding-block-start: 20px;
}`,
        `#example-element {
  scroll-padding-block-start: 2em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>

scroll-padding-block-end

逻辑属性：块结束方向的滚动内边距。

scroll-padding-block-end 交互演示（MDN）

逻辑属性：块结束方向的滚动内边距。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-padding-block-end 属性演示 - MDN 示例</title>
    <meta name="description" content="演示scroll（padding-block-end 属性演示）效果。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .default-example .info {
        inline-size: 100%;
        padding: 0.5em 0;
        font-size: 90%;
        writing-mode: vertical-rl;
      }
 
      .scroller {
        text-align: left;
        height: 250px;
        width: 270px;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border: 1px solid black;
        scroll-snap-type: y mandatory;
      }
 
      .scroller > div {
        flex: 0 0 250px;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: end;
      }
 
      .scroller > div:nth-child(even) {
        background-color: #fff;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-padding-block-end: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-padding-block-end: 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-padding-block-end: 2em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller" id="example-element">
            <div>1</div>
            <div>2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-padding-block-end: 0;
}`,
        `#example-element {
  scroll-padding-block-end: 20px;
}`,
        `#example-element {
  scroll-padding-block-end: 2em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>

scroll-padding-inline

逻辑属性：行方向的滚动内边距。

scroll-padding-inline 交互演示（MDN）

逻辑属性：行方向的滚动内边距。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-padding-inline 属性演示 - MDN 示例</title>
    <meta name="description" content="演示scroll（padding-inline 属性演示）效果。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .default-example {
        flex-wrap: wrap;
      }
 
      .default-example .info {
        width: 100%;
        padding: 0.5em 0;
        font-size: 90%;
      }
 
      .scroller {
        text-align: left;
        width: 250px;
        height: 250px;
        overflow-x: scroll;
        display: flex;
        box-sizing: border-box;
        border: 1px solid black;
        scroll-snap-type: x mandatory;
      }
 
      .scroller > div {
        flex: 0 0 250px;
        width: 250px;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: start;
      }
 
      .scroller > div:nth-child(even) {
        background-color: #fff;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-padding-inline: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-padding-inline: 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-padding-inline: 2em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller" id="example-element">
            <div>1</div>
            <div>2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-padding-inline: 0;
}`,
        `#example-element {
  scroll-padding-inline: 20px;
}`,
        `#example-element {
  scroll-padding-inline: 2em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>

scroll-padding-inline-start

逻辑属性：行起始方向的滚动内边距。

scroll-padding-inline-start 交互演示（MDN）

逻辑属性：行起始方向的滚动内边距。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-padding-inline-start 属性演示 - MDN 示例</title>
    <meta name="description" content="演示scroll（padding-inline-start 属性演示）效果。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .default-example {
        flex-wrap: wrap;
      }
 
      .default-example .info {
        width: 100%;
        padding: 0.5em 0;
        font-size: 90%;
      }
 
      .scroller {
        text-align: left;
        width: 250px;
        height: 250px;
        overflow-x: scroll;
        display: flex;
        box-sizing: border-box;
        border: 1px solid black;
        scroll-snap-type: x mandatory;
      }
 
      .scroller > div {
        flex: 0 0 250px;
        width: 250px;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: start;
      }
 
      .scroller > div:nth-child(even) {
        background-color: #fff;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-padding-inline-start: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-padding-inline-start: 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-padding-inline-start: 2em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller" id="example-element">
            <div>1</div>
            <div>2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-padding-inline-start: 0;
}`,
        `#example-element {
  scroll-padding-inline-start: 20px;
}`,
        `#example-element {
  scroll-padding-inline-start: 2em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>

scroll-padding-inline-end

逻辑属性：行结束方向的滚动内边距。

scroll-padding-inline-end 交互演示（MDN）

逻辑属性：行结束方向的滚动内边距。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-padding-inline-end 属性演示 - MDN 示例</title>
    <meta name="description" content="演示scroll（padding-inline-end 属性演示）效果。" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        min-height: 100vh;
        padding: 0;
      }
      .demo-layout {
        display: flex;
        height: 100vh;
        gap: 0;
      }
      .snippet-panel {
        width: 320px;
        flex-shrink: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: #fafafa;
      }
      .snippet-btn {
        padding: 10px 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 13px;
        color: #333;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.4;
      }
      .snippet-btn:hover {
        border-color: #8083ff;
        background: #f0f0ff;
      }
      .snippet-btn.active {
        border-color: #8083ff;
        background: #e8e8ff;
        color: #571bc1;
        font-weight: 600;
      }
      .preview-panel {
        flex: 1;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: auto;
      }
      .preview-panel > section,
      .preview-panel > div:not(.snippet-panel):not(.demo-layout) {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .default-example {
        flex-wrap: wrap;
      }
 
      .default-example .info {
        width: 100%;
        padding: 0.5em 0;
        font-size: 90%;
      }
 
      .scroller {
        text-align: left;
        width: 250px;
        height: 250px;
        overflow-x: scroll;
        display: flex;
        box-sizing: border-box;
        border: 1px solid black;
        scroll-snap-type: x mandatory;
      }
 
      .scroller > div {
        flex: 0 0 250px;
        width: 250px;
        background-color: rebeccapurple;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: end;
      }
 
      .scroller > div:nth-child(even) {
        background-color: #fff;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="demo-layout">
      <div class="snippet-panel">
        <button class="snippet-btn active" data-index="0">scroll-padding-inline-end: 0;</button>
        <button class="snippet-btn" data-index="1">scroll-padding-inline-end: 20px;</button>
        <button class="snippet-btn" data-index="2">scroll-padding-inline-end: 2em;</button>
      </div>
      <div class="preview-panel">
        <section class="default-example" id="default-example">
          <div class="scroller" id="example-element">
            <div>1</div>
            <div>2</div>
            <div>3</div>
          </div>
          <div class="info">Scroll »</div>
        </section>
      </div>
    </div>
    <script>
      const snippets = [
        `#example-element {
  scroll-padding-inline-end: 0;
}`,
        `#example-element {
  scroll-padding-inline-end: 20px;
}`,
        `#example-element {
  scroll-padding-inline-end: 2em;
}`,
      ];
 
      let styleEl = document.createElement("style");
      document.head.appendChild(styleEl);
 
      function applySnippet(index) {
        styleEl.textContent = snippets[index];
        document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
          btn.classList.toggle("active", i === index);
        });
      }
 
      document.querySelectorAll(".snippet-btn").forEach((btn) => {
        btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
      });
 
      applySnippet(0);
    </script>
  </body>
</html>