使用 CSS overscroll-behavior: contain 来防止滚动链

最新推荐文章于 2024-07-09 15:49:17 发布
最新推荐文章于 2024-07-09 15:49:17 发布
阅读量233 收藏
点赞数
文章标签： css javascript 前端 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46267040/article/details/125369600
版权

当用户滚动嵌入的网页(或网页上的任何嵌套滚动容器)并到达末尾时，浏览器将开始滚动外部页面。这被称为滚动链。

滚动链是指滚动从一个滚动容器传播到滚动链后面的祖先滚动容器。

一些用户可能会觉得这种行为很烦人。幸运的是，可以通过将 overscroll behavior: contain 应用于嵌入页面(或滚动容器)的 <body> 元素来禁用滚动链接。。

body {
  overscroll-behavior: contain;
}

Firefox、Chromium 和 Edge 通过 AutoRefixer 支持此功能，但 Safari 目前还不支持此功能：

image.png

查看效果

lio_zero
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android-Overscroll-ListView:适用于android的具有'Bounce'效果的'Overscrollable'ListView！ 弹跳效果可以关闭
05-18
android-Overscroll-ListView 适用于android的具有'Bounce'效果的'Overscrollable'ListView！ 用法： 可以使用listview.setBounce（true / false）打开/关闭反弹效果。 动画延迟可以通过延迟变量（以毫秒为单位）...
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....
css over-scroll
山茶树和葡萄树
12-26 412
css over-scroll
使用 CSS overscroll-behavior 控制滚动行为：自定义下拉刷新和溢出效果
weixin_34364071的博客
11-15 471
dev-reading/fe 是一个阅读、导读、速读的 repo，不要依赖于 dev-reading/fe 学习知识。本 repo 只是一个快速了解文章内容的工具，并不提供全文解读和翻译。你可以通过本平台快速了解文章里面的内容，找到感兴趣的文章，然后去阅读全文。 本文地址：https://github.com/dev-readin... ...
下拉溢出效果 overscroll-behavior：
Transicion tried to swim in lava
10-31 1865
该属性采用三个值： auto- 默认。源自元素的滚动可以传播到祖先元素。 contain- 防止滚动链接。滚动不会传播到祖先，但会显示节点内的局部效果。例如，Android 上的过度滚动发光效果或 iOS 上的橡皮筋效果，当用户到达滚动边界时会通知用户。注意：overscroll-behavior: contain在html元素上使用可防止过度滚动导航操作。 none- 与此相同，contain但它还可以防止节点本身内的过度滚动效果（例如 Android 过度滚动发光或 iOS 橡皮筋）。 ...
overscroll-behavior
guoqkmiss的博客
05-22 1230
overscroll-behavior overscroll-behavior CSS 属性是 overscroll-behavior-x 和 overscroll-behavior-y 属性的合并写法, 让你可以控制浏览器过度滚动时的表现——也就是滚动到边界。 默认情况下，当触及页面顶部或者底部时（或者是其他可滚动区域），移动端浏览器倾向于提供一种“触底”效果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”
CSS属性overscroll-behavior控制容器滚动行为
justforuse的博客
12-28 4630
Chrome63版本新特性中包含支持overscroll-behavior属性，此属性的功能是什么呢？我们会发现当子元素滚动到顶部或底部继续滚动滚轮时，会导致父元素的滚动，但这种行为有时会影响页面体验。使用该属性可以禁掉此行为。在子元素上应用overscroll-behavior: contain即可。其他属性值还有none, 该功能除了contain的功能外还会阻止节点的默认滚动行为，主要是移动端
jquery-overscroll:这个jquery插件允许你通过点击元素上的任何地方并用鼠标拖动来滚动溢出设置为自动的div
07-12
总的来说，`jQuery Overscroll`是一个强大而灵活的工具，它可以显著提升用户的滚动体验，特别是当你的网站或应用需要用户频繁滚动时。正确地集成和配置这个插件，能够为你的项目增添一份专业和精致。
Android-Solution-to-Overscroll-Getting-Stuck
06-03
所以发布： : 过度滚动参考： ://jasonfry.co.uk/blog/android-overscroll-revisited/ @Overrideprotected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int ...
IOS 的弹性滚动解决方案
09-01
虽然Android系统中的许多浏览器默认支持这种滚动方式，但iOS设备在某些情况下需要额外的CSS指令来实现。 在iOS中，为了使内联元素（如`<div>`）具有弹性滚动效果，开发者通常需要使用Webkit私有属性`-webkit-...
overscroll-behavior 禁止橡皮筋效果
anairen3891的博客
06-19 341
目前尚兼容性不好 文章摘自：https://developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior overscroll-behaviorCSS 属性是overscroll-behavior-x和overscroll-behavior-y属性的合并写法, 让你可以控制浏览器过度滚动时的表现——也就是滚动到边...
overscroll-behavior的使用及局限性
cry
07-15 2178
背景：滚动购物车悬浮框时，底层的页面也会跟着滚动，非常影响用户体验 此时需要在设置了overflow的元素上使用overscroll-behavior overscroll-behavior: contain; 使用后效果： 但overscroll-behavior也存在局限，只能在悬浮框存在滚动条时阻止底层页面滚动，当悬浮框内容较少，不出现滚动条，这时就无法阻止滚动了，如下图 ...
css实现单独一区域滚动，不影响整体滚动，两种方法
qq_26889291的博客
06-29 4285
css实现单独一区域滚动，不影响整体滚动，两种方法
chrome64滚动链及overscroll-behavior
zgrbsbf的专栏
11-30 579
overscroll-behavior的三个属性： auto:默认的情况 contain:阻止滚动链 none:和上一个一样，并且能阻止浏览器过渡滚动导致的Android 炫光或 iOS 回弹（Android overscroll glow or iOS rubberbanding） 另外，js判断浏览器是否支持某个css属性，CSS.supports 正在滚动的元素：doc
CSS overscroll-behavior让滚动嵌套时父滚动不触发
我的技术博客
08-29 472
一个滚动的body中有个容器,而且这个容器也是可以滚动的,当容器滚动到开始位置或者结束位置时,继续滑动鼠标会影响到body的滚动,其实一个css属性即可解决,详情请见张大神博客。
overscroll-behavior称为“滚动链”
文摘资讯
09-20 766
overscroll-behavior CSS 属性是 overscroll-behavior-x 和 overscroll-behavior-y 属性的合并写法, 让你可以控制浏览器过度...
CSS 样式链接的多方面应用与最佳实践
Lesleyhnj的博客
07-04 483
在网页开发中，CSS 样式链接是通过在HTML文档中的<link>标签或者通过<style>标签内部定义的方式来引入和应用CSS样式表。这些样式表包含了诸如颜色、字体、布局等方面的规则，使得开发者能够将设计风格和布局应用到整个网站或特定页面的各个元素上。
css—圆角渐变边框+透明背景色
最新发布
heal_l的博客
07-09 311
【代码】css—圆角渐变边框+透明背景色。
html, body { height: 100%; overflow-y: scroll; body { -webkit-overflow-scrolling: touch; overscroll-behavior: none; } }
05-31
这段代码的问题在于，您在`html`和`body`标签中设置了`overflow-y: ...这样，您可以在`body`中隐藏滚动条，并使用`.content`来实现内容的滚动，并在其中使用`overscroll-behavior: none`来阻止iOS设备的弹性滚动效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值