- 综合排序
- 最热优先
- 最新优先
- 来自专栏鸿蒙开发笔记
OpenHarmony UI开发-组件overscroll-decor
GridView, ViewPager, ScrollView, HorizontalScrollView, Any View - Text, Image...下载安装ohpm install @ohos/overscroll-decor mUpOverScroll: boolean = true约束与限制在下述版本验证通过：Deveco Studio:4.0 (4.0.3.513),SDK:API10 (4.0.10.10)目录结构|---- overscroll-decor | |---- entry # 示例代码文件夹| |---- library # overscroll库文件夹| |---- index.ets # 对外接口
24420编辑于 2024-09-19 《网页滚动的“隐形指挥官”：overscroll - behavior属性全解析》
overscroll - behavior属性，如同一位智能的交互管家，赋予开发者对滚动行为进行精细控制的能力。 在实际的网页开发中，合理运用overscroll - behavior属性能够带来意想不到的效果，显著提升用户体验。 对于那些追求极致用户体验的网页应用，如在线艺术展览、虚拟旅游等，使用overscroll - behavior属性可以帮助打造沉浸式的交互场景。 overscroll - behavior属性对于优化移动端交互尤为重要。例如，在一个移动端的电商应用中，商品列表页面通常需要频繁滚动。 从性能优化的角度来看，overscroll - behavior属性也发挥着重要作用。
35200编辑于 2025-06-18- 来自专栏前端自习课
【总结】1823- 移动端滚动穿透与滚动溢出解决方案
滚动溢出 问题描述 如上录屏所示，弹窗内也含有滚动元素，在滚动元素滚到底部或顶部时，再往下或往上滚动，也会触发页面的滚动，这种现象称之为滚动链（scroll chaining）, 但是感觉滚动溢出（overscroll ❌ 解决方案A (overscroll-behavior) overscroll-behavior 是 CSS 的一个特性，允许控制浏览器滚动到边界的表现，它有如下几个值。 所以可以这样解决问题： .content { overscroll-behavior: none; } 简洁干净高性能，不过 Safari 全系不支持，兼容性如下，有没有感觉 Safari 就是现代版的 ) { e.preventDefault() } }) 解决方案完整 Demo https://github.com/Barrior/cases/blob/main/overscroll.html
1.4K11编辑于 2023-10-04 - 来自专栏itclanCoder
控制页面的滚动:自定义下拉到刷新和溢出效果
行为(对应的三个属性值,auto,contain,none) 防止滚动逃离固定位置元素通过overscroll-behavior:contain解决 禁用拉到刷新(overscroll-behavior-y : contain) 禁用超滚色条纹和橡皮筋效果要在滚动边界时禁用反弹效果(橡皮筋效果),使用overscroll-behavior-y: none: 完整Demo 总结 CSS overscroll-behavior 这些变通办法在滚动性能方面具有良好记录的负面影响 引入overscroll行为 overscroll-behavior属性是一个新的CSS功能，用于控制当你过度滚动容器（包括页面本身）时发生的情况。 注意:overscroll-behavior还支持overscroll-behavior-x和overscroll-behavior-y的简写，如果您只想定义特定轴的行为 让我们深入一些例子来看看如何使用 为了防止导航，你可以使用overscroll-behavior-x：none 完整Demo 把它放在一起，完整的聊天框演示，使用overscroll-behavior行为来创建一个自定义的拉动到刷新动画
4.6K20发布于 2020-10-28 - 来自专栏前端杂货铺-Gopal
【No Problem】如何解决 Mac 左右滚动误触返回事件？
设置如下的 CSS，设置 overscroll-behavior-x 为 none 或者 contain 都是可以的 /* 设置容器 */ .container { overscroll-behavior-x : none; } 见 MDN[2] 中的定义 overscroll-behavior-x 这个 CSS 属性用来控制当滚动到区域的水平边界时的浏览器行为。 小结 Mac 中左右滚动导致返回的原因是滚动“超过”滚动区域的水平边界，可以使用 JavaScript 在边界条件中阻止事件，也可以通过 CSS 的 overscroll-behavior-x 控制滚动的行为 后续会接着更新~ 参考 overscroll-behavior[5] Stop chrome back/forward two finger swipe[6] 参考资料 [1]访问地址: https: : https://css-tricks.com/almanac/properties/o/overscroll-behavior/ [6]Stop chrome back/forward two finger
3.1K20编辑于 2022-08-01 - 来自专栏Android机动车
歌词显示控件的实现（下）——自定义View
但是，这样实现的话，用户一直滑动，整个歌词内容区域就会滑动出我们的可视区域，也就是常说的overScroll，如果不加以限制将会是一种非常差的用户体验。 与正常滑动时有所区别，滑动应该有一种阻尼效果：也就是实际滑动距离和视图的滚动距离并不相等，而且随着overScroll的值越大，阻力越大，滑动越艰难，并在用户手指离开屏幕后回到overScroll的值为零的位置 通过一次一次对代码的细化，只要这么简单的两个方法，就完成了滑动时偏移量scrollY的计算，包括overScroll和非overScroll。 到了这一步，歌词的显示、滑动查看都已经完成。
1.5K10发布于 2018-08-03 - 来自专栏鱼头的Web海洋
忍法，scroll 翻滚之术！
CSS overscroll overscroll-behavior overscroll-behavior是 2019 年 6 月份 W3C 第一次发布的CSS 过渡滚动行为模块 Level 1里唯一一个属性 overscroll-behavior让你可以控制浏览器滚动到边界时的表现。 overscroll-behavior-y：正常情况下，处理纵轴滚动条滚动到边界时的表现。 overscroll-behavior-inline：跟overscroll-behavior-x一样。 overscroll-behavior-block：跟overscroll-behavior-y一样 可选的值为： auto：默认值。 栗子如下： 使用了overscroll-behavior: contain; ? 默认情况 ? 兼容性如下： ?
1.6K10发布于 2020-04-16 - 来自专栏前端Q
15 个你不知道的 CSS 属性
img { image-rendering: pixelated; } 8. overscroll-behavior: 过度滚动行为确定用户过度滚动元素时的行为，允许开发人员进一步自定义滚动体验 .element { overscroll-behavior: contain; } 9. user-select: user-select控制用户是否可以选择元素内的文本，从而更好地控制用户交互和界面设计 .element { mask-image: url('mask.png'); } 15. overscroll-behavior-block: Overscroll-behavior-block .element { overscroll-behavior-block: none; } 结论 通过将这些CSS 属性集成到您的工具包中，您可以开启一个充满创意可能性和对网页设计进行细粒度控制的世界
54910编辑于 2024-05-31 - 来自专栏MudOnTire
冷门又好用的 CSS 特性
overflow-y: scroll; scroll-snap-type: y mandatory; } section { scroll-snap-align: start; } 12. overscroll-behavior 属性 MDN - overscroll-behavior Can I Use - CSS overscroll-behavior CSS的 overscroll-behavior 属性用于定义元素滚动到滚动区域边界时的行为 它是 overscroll-behavior-x 和 overscroll-behavior-y 的简写。 浏览器的默认行为是：当子元素滚动到边界后继续滚动鼠标，会触发父元素的滚动。 通过设置 overscroll-behavior:contain 就可以修改这一行为，而不需要监听 scroll 事件去阻止冒泡。
1.9K10编辑于 2022-03-22 - 来自专栏前端皮小蛋
修复一个因为 scrollbar 占据空间导致的 bug
在他电脑上， 手动把原本的 overscroll-y: scroll 改成 overscroll-y: overlay 问题就结局了。 由此判定是： 滚动条占据空间 引起的bug。 overscroll-y: overlay CSS属性 overflow， 定义当一个元素的内容太大而无法适应块级格式化上下文的时候该做什么。
3.9K20发布于 2020-06-09 - 来自专栏技术小黑屋
处理 WebView 与 ViewPager 滑动冲突
看了上面的文档，我们可能还是有一些疑惑，到底什么是overScroll。正所谓一图胜千言，看一下下图就知道了。 ? 上面红框的内容就是overScroll的效果，其实就是划过了的意思（英语中over有过的意思） 了解了上面的信息，我们具体的实施办法也就有了。
2.4K20发布于 2020-02-10 - 来自专栏前端达人
2024年，你需要了解下这 12 个现代化 CSS 新属性
浏览器兼容性 10、overscroll-behavior 在网页设计中，处理滚动行为是提升用户体验的关键之一。 为了解决这个问题，CSS提供了一个属性overscroll-behavior。 overscroll-behavior属性允许开发者控制滚动区域的边界行为。 /* 设置overscroll-behavior */ .overscroll-container { overscroll-behavior: contain; } 在这个例子中，类名为.overscroll-container
3.1K10编辑于 2024-01-31 - 来自专栏Android知识点总结
【Flutter 组件集录】NotificationListener｜ 8月更文挑战
} } 我们可以监听任意的 Notification 类型，比如下面的 OverscrollNotification，这个监听将会在列表滑动到最顶端或最底端时被触发，在回调的数据中可以得到越界的尺寸 overscroll ===dragDetails:${notification.dragDetails}' '====pixels:${notification.metrics.pixels}' '=====overscroll :${notification.overscroll}'); return false; } } 除了对某一种 Notification 监听，我们也可以通过父级来监听多个 Notification
2.2K20编辑于 2022-03-08 - </body> <script type="text/javascript"> //禁止下拉 var overscroll _isScroller = true }) } overscroll(document.querySelector('.scroll')); document.body.addEventListener来自专栏杨龙飞前端
微信端防止下拉
1519366332.jpg" style="width: 100%;" />
1.9K50发布于 2018-06-15
拆解热门网站交互：分析电商 APP 的下拉刷新动画实现
要点： 自定义滚动容器：使用 overflow-y: auto 与 overscroll-behavior: contain。 /div>
SAUI-关于input滚动问题
false}) }, onblur: function (e, param, inst) { this.setData({sysScroll: true}) } 2 去掉父级的overscroll
你可能不知道，前端这6个有用的技术可以这么酷！
具体场景看这篇文章：https://www.zhangxinxu.com/wo... 5.禁止拉动刷新 CSS overscroll-behavior属性允许开发人员在达到内容的顶部/底部时覆盖浏览器的默认溢出滚动行为 使用该案例包括禁用移动设备上的“拉动到刷新”功能，消除过度滚动发光和橡皮筋效果，并防止页面内容在模态/叠加层下滚动 body { overscroll-behavior-y: contain; } 这个属性对于组织模态窗口内的滚动也非常有用
Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套
with AutomaticKeepAliveClientMixin 让 ListView 在切换之后也保持滑动位置通过 ScrollConfiguration.of(context).copyWith(overscroll Axis.vertical, ///去掉 Android 上默认的边缘拖拽效果 scrollBehavior: ScrollConfiguration.of(context).copyWith(overscroll override bool get wantKeepAlive => true;}所以这里我们有解锁了另外一个小技巧：通过 ScrollConfiguration.of(context).copyWith(overscroll /去掉 Android 上默认的边缘拖拽效果 behavior: ScrollConfiguration.of(context).copyWith(overscroll
Flutter完整开发实战详解(十八、 神奇的ScrollPhysics与Simulation)
offset 转为需要移动的 pixels double applyPhysicsToUserOffset(ScrollMetrics position, double offset) /// 返回 overscroll ，如果返回 0 ，overscroll 就一直是0 /// 返回边界条件 double applyBoundaryConditions(ScrollMetrics position, double value offset > 0.0); final double friction = easing // Apply less resistance when easing the overscroll position.pixels; if (position.maxScrollExtent <= position.pixels && position.pixels < value) // overscroll leadingExtent:position.minScrollExtent 和 trailingExtent: position.maxScrollExtent 两个参数，在 underscroll 和 overscroll
干货 | Flutter控件CustomScrollView原理解析及应用实践
“applyBoundaryConditions”方法：它主要也是为“overscroll”场景服务。它决定了用户的滑动位置能否overscroll。 这个方法的返回值是一个矫正值，比如BouncingScrollPhysics 永远返回的都是0，也就是说它允许用户进行overscroll。 而“ClampingScrollPhysics”在overscroll状态的返回的是一个非0的矫正值，会将新的offset矫正到scrollable的boundary里面来，避免出现overscroll 因此如果我们想要实现一个一端可以overscroll，另一端不允许的scrollable，就可以通过重写这个方法加以实现。 类似的iOS平台上默认的BouncingScrollPhysics在overscroll时，手松开时也会有一个反弹的动画，也是由这个方程决定。
