CSS 滚动捕获 scroll-margin

CSS滚动捕获 scroll-margin

设置元素的滚动外边距

非滚动捕获容器

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

html 复制代码
<body>
  <main>
    <section id="section1"><h1>第一部分</h1></section>
    <section id="section2"><h1>第二部分</h1></section>
    <section id="section3"><h1>第三部分</h1></section>
  </main>
  <aside>
    <nav>
      <ul>
        <li><a href="#section1">锅包肉</a></li>
        <li><a href="#section2">雪衣豆沙</a></li>
        <li><a href="#section3">小鸡炖蘑菇</a></li>
      </ul>
    </nav>
  </aside>
</body>
css 复制代码
main {
  overflow: auto;
  scroll-behavior: smooth;
  box-sizing: border-box;
  /* scroll-padding-top: 10px; */
}
section {
  height: 100%;
  scroll-margin: 10px;
}

从下图可以看出, 当点击右侧 <a> 定位时, 元素并没有紧贴容器上边缘(第一个元素除外), 从而达到良好的滚动体验感受

滚动捕获容器

html 复制代码
<div class="scroll">
  <section class="item">1</section>
  <section class="item">2</section>
  <section class="item">3</section>
  <section class="item">4</section>
</div>
css 复制代码
.scroll {
  overflow: auto;
  scroll-snap-type: y mandatory;
}
.scroll .item {
  height: 100%;
  scroll-snap-align: start;
  scroll-margin: 20px;
}
.item:nth-child(3) {
  scroll-margin: 40px;
}

你会发现虽然第三个元素设置了 scroll-margin: 40px; 但是在下边缘发生滚动捕获时, 捕获的高度还是 20px.

更有趣的时, FirefoxSafari 表现与 Chrome 不同, 原因在 MDN 有提及, 就是使用 scroll-margin: 40px; 虽然语法上是给四个 scroll-margin 都设置了值, 但实际上只有 scroll-margin-top 有值(y 轴方向滚动来说)

代码里 scroll-snap-align: start; 约束了对齐方式就是顶部对齐, 所以 FirefoxSafari 表现符合预期. 我们可以将 scroll-snap-align 改为 end 试一下, 为了说明问题, 先将所有元素的 scroll-margin 都设置为 20px

可以看到, 在 Firefox 中发生滚动捕获时, 只会底部对齐, 符合预期

什么情况会让 Firefox 也出现问题呢? 那就是将第三个元素的 scroll-margin 设置为 40px. 看到了吗, 我们指定的 mandatory 严格捕获在动图的最后失效了, 滚动停在了第二个元素.

语法

margin 一样, scroll-margin 也是一个简写属性, 是 scroll-margin-bottomscroll-margin-leftscroll-margin-rightscroll-margin-top 四个属性的简写.

兼容性

谢谢你看到这里😊

相关推荐
腾讯TNTWeb前端团队4 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰7 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪7 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy8 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom9 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom9 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom9 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom9 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom9 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试