CSS Overscroll Behavior Module Level 1

最新推荐文章于 2024-01-18 15:12:05 发布
最新推荐文章于 2024-01-18 15:12:05 发布
阅读量231 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiwoo_weekly/article/details/93559190
版权

编者按：本文作者奇舞团前端开发工程师何文力，同时也是 W3C CSS 工作组成员。

6 月 6 日，W3C 发布了第一份滚动溢出行为工作组草案 CSS Overscroll Behavior Module Level 1。该草案定义 overscroll-behavior 去控制滚动视图滚动到边缘时的行为和效果

简介

在日常开发过程中，大家应该都见到过这么一个行为：子容器滚动条滚动到底，会带动父容器一起滚动。要解决这个问题，通常我们可以通过监听子容器的事件，然后调用 preventDefault 或是将父容器的 overflow 临时设置为

最低0.47元/天 解锁文章
奇舞周刊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS overscroll-behavior
weixin_34336292的博客
02-02 99
overscroll-behavior新属性解决了在手机上弹出滚动的一些问题，具体内容查看网址：https://www.w3cplus.com/css/overscroll-behavior.html 转载于:https://www.cnblogs.com/yuanyanbk/p/8405270.html...
CSS overscroll-behavior：
YDOOK
08-13 350
overscroll-behavior ：auto 默认，继承父类滚动样式 overscroll-behavior ：contain 阻止滚动链接，不继承父类滚动样式，使用Android 炫光或 iOS 回弹效果。 overscroll-behavior ：none 阻止滚动链接，不继承父类滚动样式，不使用Android 炫光或 iOS 回弹效果。 ...
CSS属性overscroll-behavior控制容器滚动行为
justforuse的博客
12-28 4645
Chrome63版本新特性中包含支持overscroll-behavior属性，此属性的功能是什么呢？我们会发现当子元素滚动到顶部或底部继续滚动滚轮时，会导致父元素的滚动，但这种行为有时会影响页面体验。使用该属性可以禁掉此行为。在子元素上应用overscroll-behavior: contain即可。其他属性值还有none, 该功能除了contain的功能外还会阻止节点的默认滚动行为，主要是移动端
使用 CSS overscroll-behavior 控制滚动行为：自定义下拉刷新和溢出效果
weixin_30568715的博客
11-16 193
CSS 的新属性overscroll-behavior允许开发者覆盖默认的浏览器滚动行为，一般用在滚动到顶部或者底部。 背景 滚动边界和滚动链接（boundary & chaining） 在 APP 中经常使用的抽屉导航(drawer)中，我们期望的效果是：滚动到底部时，滚动停止，因为我们到达了"滚动边界"。 但是在 Web 页面中滚动并不会停止，而是继续滚动抽屉后面...
HTML中元素的滚动溢出影响其父级元素的滚动-overscroll-behavior
最新发布
JackieDYH的博客
01-18 657
在编写跨浏览器兼容的代码时，请考虑使用其他滚动事件相关属性或 JavaScript 来实现所需的滚动行为。是一个 CSS 属性，用于控制滚动事件在元素和其父级滚动容器之间的链接行为。这样，当用户在滚动元素时，滚动事件将仅在元素内部进行处理，不会传递给父级容器。是一个 CSS 属性，用于控制元素在滚动到边界时的滚动行为。该属性可以应用于任何具有滚动内容的元素，例如滚动容器（如。这样，当用户在滚动元素时，不会出现滚动溢出的效果。例如，要禁止滚动事件链接到父级滚动容器，可以将。
my-samples-css
04-12
可以使用CSS的`overscroll-behavior`属性来控制元素的溢出滚动行为，设置为`contain`可以阻止内部滚动影响外部容器。 5. **按行数裁剪文本**: 对于长文本，有时我们只希望显示前几行，可以使用CSS的`line-clamp`...
Android代码-overscroll-decor
08-06
Over-Scroll Support For Android's RecyclerView, ListView, GridView, ScrollView ... The library provides an iOS-like over-scrolling effect applicable over almost all Android native scrollable views....
前端项目-jquery-overscroll.zip
09-03
前端项目-jquery-overscroll,overscroll是一个jquery插件和polyfill，用于MobileSafari的溢出滚动样式。它旨在与最新版本的jquery一起在桌面浏览器上使用。
responsive-tables-ext:CSS 使 Outsystems 上的 London 主题中的表格记录小部件更具响应性
07-11
8. **优化滚动**：对于长表格，优化滚动性能以确保在移动设备上流畅滚动，可能需要利用CSS的`overscroll-behavior`属性或其他技术。 9. **图标和颜色**：使用合适的图标和颜色来增强视觉效果，指示表格的状态和功能...
Android-Solution-to-Overscroll-Getting-Stuck
06-03
Android-Overscroll-Getting-Stuck 的解决方案在 StackOverflow 上看到一篇关于运行 4.x 及更高版本的设备上的 Android Overscroll 问题的帖子。 所以发布： : 过度滚动参考： ://jasonfry.co.uk/blog/android-...
单行文本溢出和多行文本溢出
Dilemma_me的博客
08-28 219
单行文本溢出： .box{ width:80%;//宽度必须有 overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } 多行文本溢出： .box{ display:-webkit-box; overflow:hidden; 　text-overflow:ellipsis; 　word-break:break...
overscroll-behavior称为“滚动链”
文摘资讯
09-20 776
overscroll-behavior CSS 属性是 overscroll-behavior-x 和 overscroll-behavior-y 属性的合并写法, 让你可以控制浏览器过度...
CSS系列007-浏览器滚动溢出问题
hanbing1307的博客
03-19 258
contain:默认的滚动溢出行为将被内部的元素观察到，但相邻的区域不会产生连续滚动效果。overscroll-behavior-x:这个css属性用来控制当滚动到区域的水平边界时的浏览器行为。- none:相邻的滚动区域不会有连续滚动效果，且默认的滚动溢出行为会被阻止。- auto:默认的滚动溢出行为表现的和正常一样。
overscroll-behavior
guoqkmiss的博客
05-22 1254
overscroll-behavior overscroll-behavior CSS 属性是 overscroll-behavior-x 和 overscroll-behavior-y 属性的合并写法, 让你可以控制浏览器过度滚动时的表现——也就是滚动到边界。 默认情况下，当触及页面顶部或者底部时（或者是其他可滚动区域），移动端浏览器倾向于提供一种“触底”效果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”
移动端滚动穿透与滚动溢出解决方案
zz_jesse的博客
03-03 1176
滚动穿透滚动穿透.gif问题描述在移动端 WEB 开发的时候（小程序也雷同），如上录屏所示，如果页面超过一屏高度出现滚动条时，在 fixed 定位的弹窗遮罩层上进行滑动，它下面的内容也会跟...
控制页面的滚动:自定义下拉到刷新和溢出效果
itclanCoder
09-24 495
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击右上方,可关注本刊前言通过阅读本文,你可以通过css 中overcr...
下拉溢出效果 overscroll-behavior：
Transicion tried to swim in lava
10-31 1874
该属性采用三个值： auto- 默认。源自元素的滚动可以传播到祖先元素。 contain- 防止滚动链接。滚动不会传播到祖先，但会显示节点内的局部效果。例如，Android 上的过度滚动发光效果或 iOS 上的橡皮筋效果，当用户到达滚动边界时会通知用户。注意：overscroll-behavior: contain在html元素上使用可防止过度滚动导航操作。 none- 与此相同，contain但它还可以防止节点本身内的过度滚动效果（例如 Android 过度滚动发光或 iOS 橡皮筋）。 ...
overscroll-behavior的使用及局限性
cry
07-15 2204
背景：滚动购物车悬浮框时，底层的页面也会跟着滚动，非常影响用户体验 此时需要在设置了overflow的元素上使用overscroll-behavior overscroll-behavior: contain; 使用后效果： 但overscroll-behavior也存在局限，只能在悬浮框存在滚动条时阻止底层页面滚动，当悬浮框内容较少，不出现滚动条，这时就无法阻止滚动了，如下图 ...
html, body { height: 100%; overflow-y: scroll; body { -webkit-overflow-scrolling: touch; overscroll-behavior: none; } }
05-31
这段代码的问题在于，您在`html`和`body`标签中设置了`overflow-y: scroll`，这会导致整个页面都可以滚动，而不是仅限于内容超出部分。 此外，您设置了`-webkit-overflow-scrolling: touch`，这是一个用于iOS设备的CSS属性，用于实现平滑滚动效果。但是，这个属性应该写在`body`标签中而不是在`body`标签内部的样式中。 最后，`overscroll-behavior: none`用于阻止iOS设备的弹性滚动效果，但是这个属性只在iOS 10及以上版本中生效，如果需要兼容之前的版本，可以考虑使用JavaScript代码实现。 因此，您可以尝试修改为以下代码： ```css body { height: 100%; overflow: hidden; -webkit-overflow-scrolling: touch; } .content { height: 100%; overflow-y: scroll; overscroll-behavior: none; } ``` 这样，您可以在`body`中隐藏滚动条，并使用`.content`来实现内容的滚动，并在其中使用`overscroll-behavior: none`来阻止iOS设备的弹性滚动效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值