overscroll-behavior的使用及局限性

最新推荐文章于 2025-10-03 08:42:49 发布
原创 最新推荐文章于 2025-10-03 08:42:49 发布 · 2.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在滚动购物车悬浮框时底层页面同步滚动的问题，介绍了如何使用overscroll-behavior属性解决用户体验不佳的情况，同时也指出了此方法的局限性。

背景：滚动购物车悬浮框时，底层的页面也会跟着滚动，非常影响用户体验在这里插入图片描述
此时需要在设置了overflow的元素上使用overscroll-behavior

overscroll-behavior: contain;

在这里插入图片描述
使用后效果：
在这里插入图片描述
但overscroll-behavior也存在局限，只能在悬浮框存在滚动条时阻止底层页面滚动，当悬浮框内容较少，不出现滚动条，这时就无法阻止滚动了，如下图
在这里插入图片描述

使用overscroll-behavior控制滚动边界行为
weixin_41455464的博客
06-27 136
你有没有遇到过这样的情况：在一个页面里，有一个小的滚动区域（比如一个弹窗、一个侧边栏），当你滚动到这个小区域的顶部或底部时，整个页面的滚动条竟然也跟着动了起来？这样，当你在侧边栏滚动到顶部或底部时，只有侧边栏会滚动，页面主体内容不会受到影响。它就像一位经验丰富的“交通警察”，能精准地控制滚动行为，让你的页面滚动起来丝滑又听话，告别“一动全身”的尴尬。当你滚动到弹窗的底部时，整个页面的滚动条也跟着动了起来，这显然不是我们想要的。当滚动到达边界时，它会“传染”给父元素，导致不必要的滚动，影响用户体验。
深入解析 CSS `overscroll-behavior-y` 属性
最新发布
2501_93104808的博客
10-03 311
overscroll-behavior-y是CSS属性，用于控制垂直滚动容器的边界行为。它有三个主要值：auto（默认，允许滚动链和原生效果）、contain（阻止滚动链但保留效果）和none（阻止滚动链和效果）。该属性不可继承，适用于有垂直溢出的元素，常用于改善模态框等组件的用户体验。使用时通常与overscroll-behavior-x配合，或直接使用简写属性overscroll-behavior。现代浏览器普遍支持该属性。
CSS overscroll-behavior：解决滚动穿透的 “边界控制” 专家
探索技术与生活
08-07 1212
overscroll-behavior是CSS中控制滚动边界行为的属性，能有效解决弹窗、侧边栏等场景下的“滚动穿透”问题。通过contain（阻止穿透但保留弹性效果）或none（完全禁用边界行为）等值，可精准控制滚动链传递。相比传统JS方案更简洁高效，支持与-webkit-overflow-scrolling等属性配合优化体验。需注意兼容性（Chrome 63+、Firefox 59+等主流浏览器支持），是提升交互细节的实用工具。
CSS系列（37）-- Overscroll Behavior详解
欢迎来到这里，希望文章能对你有所帮助
12-26 1102
CSS之旅第三十七站
深入解析 CSS `overscroll-behavior-x` 属性
2501_93104808的博客
10-03 365
overscroll-behavior-x是CSS属性，用于控制水平滚动容器的边界行为。它能阻止水平滚动链（防止父级元素滚动）、管理原生过滚动效果（如弹跳/发光），提升用户体验。主要取值：auto（默认）、contain（阻止滚动链但保留效果）、none（阻止滚动链和效果）。该属性适用于有水平溢出内容的元素，不可继承，现代浏览器广泛支持。常与overscroll-behavior-y配合使用，或通过简写属性overscroll-behavior同时控制水平和垂直方向。在移动端可防止操作内部组件时意外触发页面
uniapp H5的弹窗滚动穿透解决
每天都要努力学习哦~~
04-22 2843
有一层遮罩蒙层覆盖在body上时，当我们滚动，它下面的内容也会跟着一起滚动，看起来好像是上面的滚动事件穿透到下面的DOM元素上一样，我们称之为滚动穿透。
overscroll-behavior
guoqkmiss的博客
05-22 1470
overscroll-behavior overscroll-behavior CSS 属性是 overscroll-behavior-x 和 overscroll-behavior-y 属性的合并写法, 让你可以控制浏览器过度滚动时的表现——也就是滚动到边界。 默认情况下，当触及页面顶部或者底部时（或者是其他可滚动区域），移动端浏览器倾向于提供一种“触底”效果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”
CSS overscroll-behavior：
YDOOK
08-13 507
overscroll-behavior ：auto 默认，继承父类滚动样式 overscroll-behavior ：contain 阻止滚动链接，不继承父类滚动样式，使用Android 炫光或 iOS 回弹效果。 overscroll-behavior ：none 阻止滚动链接，不继承父类滚动样式，不使用Android 炫光或 iOS 回弹效果。 ...
css overscroll-behavior
08-20
以下是一个使用 `overscroll-behavior` 的示例，展示了如何在特定元素上禁用滚动溢出效果： ```css .scrollable-area { overscroll-behavior: none; /* 禁用所有方向的滚动溢出效果 */ } ``` 在这个例子中，`....
overscroll-behavior 怎么用 示范代码
10-16
`overscroll-behavior` 是CSS的一个新特性，它允许开发者自定义元素在滚动过程中的过度滚动效果。这个属性主要用于控制元素滚动到边缘之外时的行为，比如创建平滑的滚屏效果、淡入淡出动画等。 使用示例代码： ```...
04 【布局之Overscroll Behavior 定位偏移量】
DSelegent的博客
08-30 504
04 【布局之Overscroll Behavior 定位偏移量】
overscroll-behavior称为“滚动链”
文摘资讯
09-20 988
overscroll-behavior CSS 属性是 overscroll-behavior-x 和 overscroll-behavior-y 属性的合并写法, 让你可以控制浏览器过度...
CSS属性overscroll-behavior控制容器滚动行为
justforuse的博客
12-28 4812
Chrome63版本新特性中包含支持overscroll-behavior属性，此属性的功能是什么呢？我们会发现当子元素滚动到顶部或底部继续滚动滚轮时，会导致父元素的滚动，但这种行为有时会影响页面体验。使用该属性可以禁掉此行为。在子元素上应用overscroll-behavior: contain即可。其他属性值还有none, 该功能除了contain的功能外还会阻止节点的默认滚动行为，主要是移动端
chrome64滚动链及overscroll-behavior
zgrbsbf的专栏
11-30 654
overscroll-behavior的三个属性： auto:默认的情况 contain:阻止滚动链 none:和上一个一样，并且能阻止浏览器过渡滚动导致的Android 炫光或 iOS 回弹（Android overscroll glow or iOS rubberbanding） 另外，js判断浏览器是否支持某个css属性，CSS.supports 正在滚动的元素：doc
CSS 中的overscroll-behavior属性
读心悦
09-25 856
是 CSS 中的一个属性，它用于控制元素在发生滚动时，当滚动范围超出其边界时的行为。这个属性对于改善用户体验特别有用，尤其是在移动端设备上，当用户尝试滚动一个已经达到滚动极限的元素时，可以通过此属性来避免默认的“弹性”效果或自定义这种效果。
CSS overscroll-behavior
weixin_34336292的博客
02-02 152
overscroll-behavior新属性解决了在手机上弹出滚动的一些问题，具体内容查看网址：https://www.w3cplus.com/css/overscroll-behavior.html 转载于:https://www.cnblogs.com/yuanyanbk/p/8405270.html...
使用 CSS overscroll-behavior 控制滚动行为：自定义下拉刷新和溢出效果
weixin_30568715的博客
11-16 303
CSS 的新属性overscroll-behavior允许开发者覆盖默认的浏览器滚动行为，一般用在滚动到顶部或者底部。 背景 滚动边界和滚动链接（boundary & chaining） 在 APP 中经常使用的抽屉导航(drawer)中，我们期望的效果是：滚动到底部时，滚动停止，因为我们到达了"滚动边界"。 但是在 Web 页面中滚动并不会停止，而是继续滚动抽屉后面...
overscroll-behavior和overscroll-behavior-x和overscroll-behavior-y的属性
qq_43235503的博客
06-29 279
overscroll-behavior和overscroll-behavior-x和overscroll-behavior-y的属性
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值