CSS 滚动捕获 scroll-margin

CSS滚动捕获scroll-margin：实现平滑滚动与容器边缘间距

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

原创

最新推荐文章于 2025-05-08 16:37:17 发布 · 1.4k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

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

CSS滚动捕获 scroll-margin

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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

庇耳拉海莱

关注关注

14
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

React 无限滚动（Infinite Scroll）实现

AI架构全栈开发实战笔记

05-28

797

本文旨在全面讲解React应用中实现无限滚动的技术方案。无限滚动的基本概念和工作原理核心API（Intersection Observer）的深入解析纯React实现方案性能优化和边界情况处理实际项目中的应用实践核心概念与联系：讲解无限滚动的本质和实现原理基础实现方案：使用Intersection Observer API的简单实现高级优化方案：性能优化和边界处理实际应用案例：完整项目实现和代码解析扩展思考：未来发展趋势和替代方案。

CSS 滚动捕获 Scroll Snap

broken_promise的博客

11-06

899

CSS滚动捕获允许开发者通过声明一些位置(或叫作捕获位置)来创建精准控制的滚动体验. 通常来说轮播图就是这种体验的例子, 在轮播图中, 用户只能停在图A或者图B, 而不能停在A和B的中间.比如平时用淘宝或小红书, 当你上滑到下一个推荐内容时, 页面不会停留在两个推荐内容之间. 有限的手机屏幕尺寸对于这种一项一项展示的内容来说, 需要精准的滑动提供良好的体验. 当然默认情况下, 是滚动到哪里就显示什么内容, 不会存在所谓的「吸附」行为CSS。

参与评论您还未登录，请先登录后发表或查看评论

忍法，scroll 翻滚之术！

鱼头的Web海洋

03-04

639

作者：陈大鱼头 github： KRISACHAN 前言在日常的开发中，我们对 scroll 这个单词肯定不陌生。例如因为看不惯浏览器默认样式而用 JS 一顿猛如虎操作的自定义滚动条。或者是嗖~一下就到顶的回到顶部。又或者是想去哪点哪的标题导航。但是在过去的开发中，要实现这些功能并不是那么轻松的一件事情。例如我们要实现一个有滚动效果的回到顶部功能，我们可能需要...

scrollIntoView使用教程：让页面滚动到指定元素的可见区域

热门推荐

每天都要努力学习哦~~

07-05

2万+

scrollIntoView是一个DOM元素的方法，它可以将当前元素滚动到浏览器窗口的可见区域内。该方法有一些可选参数，可以用来控制滚动的行为。总结一下，scrollIntoView是一个非常实用的JavaScript方法，可以帮助我们实现页面滚动的交互效果。它可以在点击事件或其他交互事件中调用，将指定的元素滚动到浏览器窗口的可视区域内。除了基本的滚动功能，scrollIntoView方法还支持一些配置选项，可以实现平滑滚动和对齐方式的调整。希望本文对你理解和使用scrollIntoView方法有所帮助。

css中scroll怎么用,CSS scroll-margin-bottom属性用法及代码示例

weixin_33897367的博客

08-03

2475

scroll-margin-bottom属性用于将所有滚动边距一次性设置到元素的底部。为scroll-margin-bottom指定的值确定应该主要显示在支持范围之外的页面的多少。因此，scroll-margin-bottom值代表定义了滚动捕捉区域的起始位置，该区域用于将该框捕捉到捕捉端口。用法:scroll-margin-bottom:length/* Or */scroll-margin-b...

scroll-margin-top

qq_36000961的博客

01-10

449

导航栏fixed，跳转链接时navbar会遮挡部分内容，可以使用scroll-margin-top。

视图容器与滚动行为的博弈：深入理解scroll-view在外卖场景的应用

![视图容器与滚动行为的博弈：深入理解scroll-view在外卖场景的应用]...scroll-view作为移动端开发中实现局部滚动的核心组件，在复杂业务场景下兼具灵活性与性能挑战。本文系统阐述了scroll-view的理论机制，涵盖其结构

HBuilderX index.j接收到还回值data 如何在scroll-view组件中接收并显示多个图片链接

04-15

好的，我现在需要帮用户解决在HBuilderX中使用... - `margin-bottom`：设置图片间距 - `binderror`：统一错误处理 3. **性能优化**： - 使用`wx:key`提升列表渲染效率 - 建议添加`lazy-load`属性实现懒加载 ###

CSS 滚动捕获 scroll-snap-type

broken_promise的博客

11-13

1773

CSS 滚动捕获 scroll-padding

scroll-view里的元素设置margin-top属性，出现滚动条

weixin_48604432的博客

05-27

884

1.在循环列表的时候明明数据还没沾满整个屏幕，但是出现了竖行滚动条 <scroll-view scroll-y="true" style='height:{{winHeight - 100}}px' class='scrollcolumn'> <view style="content: ''; overflow: hidden;"></view>//加一个空元素就好了 <view wx:for="{{datalist}}" :key='item.code'

使用scroll,translation,margin三种滑动效果的对比

01-01

View滑动效果常用属性详解：scroll、translation、LayoutParams代码 http://blog.youkuaiyun.com/Holmofy/article/details/53959511

canvas-scroll:长img列表页面中的模拟滚动，由画布使用

05-13

关于canvas-scroll 打开手机浏览器，或者chrome模拟手机基于canvas实现图片列表的滚动，通过移动端touch事件进行模拟滚动

滚动条基本样式设置

神膘护体小月半的博客

12-26

9325

滚动条基本样式设置

CSS滚动捕捉技术：scroll-padding与scroll-margin详解

最新发布

weixin_35019679的博客

05-08

452

本文深入探讨CSS中的滚动捕捉技术，特别是scroll-padding和scroll-margin属性的用法和效果。通过实例演示如何利用这些属性调整滚动容器内的元素对齐方式，以及如何为滚动容器设置内边距和外边距，以实现更加精细的滚动控制。

重新学习 scrollIntoview

奇舞周刊

09-18

2525

大家可能都知道 dom 有一个scrollIntoview方法，它可以轻易的让目标元素滚动到可视范围之内，而无需手动计算偏移量dom.scrollIntoview()效果如下这样跳转比较生硬，因此可能还知道有这样一个参数dom.scrollIntoview({ behavior: 'smooth' })这样就能平滑滚动了仅仅只有这些了吗？其实还可以做很多一、重新学习 scrollIntoVi...

css scroll-snap控制滚动元素

weixin_43294560的博客

10-16

905

注意正常的padding在scroll-snap中用来控制停止后相对滚动容器的位置会失效用于精细控制滚动停止后元素相对于滚动容器的位置} li {}

scrollIntoView的基本定义、以及Vue3、vue2中使用: 点击导航滚动到对应区域。

weixin_45803990的博客

05-15

9974

MDN 关于scorllIntoView的介绍Element接口的方法会滚动元素的父容器，使被调用的元素对用户可见。

scrollIntoView()，头部有fixed布局会导致滚动条丢失精度的问题，怎么办

u012732909的博客

07-24

1574

使用CSS的scroll-margin-top属性，在元素滚动到达时添加一个额外的距离，以避免滚动到头部fixed布局之下。

javascript中scrollIntoView()方法的使用

xioxi

05-16

585

javascript中scrollIntoView()方法的简单使用