CSS 滚动捕获 scroll-padding

最新推荐文章于 2025-05-08 16:37:17 发布

庇耳拉海莱

最新推荐文章于 2025-05-08 16:37:17 发布

阅读量419

点赞数

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/broken_promise/article/details/134610154

版权

css 专栏收录该内容

51 篇文章

订阅专栏

本文介绍了CSS的scroll-padding属性，用于设置元素滚动时的视觉内边距，不影响布局。同时讨论了滚动捕获容器的用法，以及该属性的简写形式、支持的值类型和浏览器兼容性情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

scroll-padding

CSS 滚动捕获 scroll-padding

设置元素的滚动内边距, 就像 padding 所做的那样. 但并不影响布局.

非滚动捕获容器

我们先来看看不影响布局到底是什么意思. 我们平时会见到左侧是内容, 右侧是内容导航的页面, 比如下图

在这里插入图片描述

这样看起来没有问题, 但往往通过锚点定位时我们不希望内容紧贴着上边界, 那我们就给左侧的滚动容器增加 scroll-padding

main {
  height: 100vh;
  overflow: auto;
  scroll-behavior: smooth;
  scroll-padding-top: 10px;
}

在这里插入图片描述

可以看到, 除了第一部分之外剩余的部分通过锚点定位都会在其上方空出 10px 的位置. 但实际上, main 是没有 padding 的, 即布局没有改变, 只是在滚动时多了这么个视觉上的效果.

滚动捕获容器

<div class="scroll">
  <section class="item">1</section>
  <section class="item">2</section>
  <section class="item">3</section>
  <section class="item">4</section>
</div>

.scroll {
  width: 200px;
  height: 200px;
  overflow: auto;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 10px;
}
.item {
  height: 100%;
  scroll-snap-align: start;
}