CSS 滚动捕获 scroll-margin

庇耳拉海莱

于 2023-12-02 11:03:58 发布

阅读量1.3k

点赞数 14

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/broken_promise/article/details/134749181

文章介绍了CSS的scroll-margin属性用于设置元素与滚动边缘的距离，解决锚点定位时元素贴边问题。同时讨论了滚动捕获容器的scroll-snap-type和scroll-margin在不同浏览器中的行为差异以及它们的兼容性问题。

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

CSS滚动捕获 scroll-margin

设置元素的滚动外边距

之前在 scroll-padding 中说过如何用 scroll-padding 避免锚点定位时元素贴着容器边缘的问题, 现在我们尝试用 scroll-margin 解决

<body>
  <main>
    <section id="section1"><h1>第一部分</h1></section>
    <section id="section2"><h1>第二部分</h1></section>
    <section id