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 四个属性的简写.

兼容性

谢谢你看到这里😊

相关推荐
佳腾_5 分钟前
【Web应用服务器_Tomcat】三、Tomcat 性能优化与监控诊断
前端·中间件·性能优化·tomcat·web应用服务器
brzhang10 分钟前
告别 CURD,走向架构:一份帮你打通任督二脉的知识地图
前端·后端·架构
Moment17 分钟前
在 React 里面实现国际化实现是太简单了 🙂‍↔️🙂‍↔️🙂‍↔️
前端·javascript·react.js
兜小糖的小秃毛18 分钟前
el-Input输入数字自动转千分位进行展示
前端·javascript·vue.js
兜小糖的小秃毛18 分钟前
文号验证-同时对两个输入框验证
开发语言·前端·javascript
brzhang19 分钟前
代码越写越乱?掌握这 5 种架构模式,小白也能搭出清晰系统!
前端·后端·架构
J总裁的小芒果26 分钟前
el-table 自定义列、自定义数据
前端·javascript·vue.js
晚风予星27 分钟前
简记|React+Antd中实现 tooltip、ellipsis、copyable功能组件
前端·react.js
brzhang34 分钟前
告别『上线裸奔』!一文带你配齐生产级 Web 应用的 10 大核心组件
前端·后端·架构
程序员Bears35 分钟前
深入理解CSS3:Flex/Grid布局、动画与媒体查询实战指南
前端·css3·媒体·visual studio code