overscroll-behavior的使用及局限性

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

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

overscroll-behavior: contain;

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

My_Java_Life
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
04 【布局之Overscroll Behavior 定位偏移量】
DSelegent的博客
08-30 349
04 【布局之Overscroll Behavior 定位偏移量】
overscroll-behavior
guoqkmiss的博客
05-22 1203
overscroll-behavior overscroll-behavior CSS 属性是 overscroll-behavior-x 和 overscroll-behavior-y 属性的合并写法, 让你可以控制浏览器过度滚动时的表现——也就是滚动到边界。 默认情况下，当触及页面顶部或者底部时（或者是其他可滚动区域），移动端浏览器倾向于提供一种“触底”效果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”
CSS overscroll-behavior：
YDOOK
08-13 340
overscroll-behavior ：auto 默认，继承父类滚动样式 overscroll-behavior ：contain 阻止滚动链接，不继承父类滚动样式，使用Android 炫光或 iOS 回弹效果。 overscroll-behavior ：none 阻止滚动链接，不继承父类滚动样式，不使用Android 炫光或 iOS 回弹效果。 ...
overscroll-behavior称为“滚动链”
文摘资讯
09-20 748
overscroll-behavior CSS 属性是 overscroll-behavior-x 和 overscroll-behavior-y 属性的合并写法, 让你可以控制浏览器过度...
CSS属性overscroll-behavior控制容器滚动行为
justforuse的博客
12-28 4599
Chrome63版本新特性中包含支持overscroll-behavior属性，此属性的功能是什么呢？我们会发现当子元素滚动到顶部或底部继续滚动滚轮时，会导致父元素的滚动，但这种行为有时会影响页面体验。使用该属性可以禁掉此行为。在子元素上应用overscroll-behavior: contain即可。其他属性值还有none, 该功能除了contain的功能外还会阻止节点的默认滚动行为，主要是移动端
chrome64滚动链及overscroll-behavior
zgrbsbf的专栏
11-30 577
overscroll-behavior的三个属性： auto:默认的情况 contain:阻止滚动链 none:和上一个一样，并且能阻止浏览器过渡滚动导致的Android 炫光或 iOS 回弹（Android overscroll glow or iOS rubberbanding） 另外，js判断浏览器是否支持某个css属性，CSS.supports 正在滚动的元素：doc
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....
Android-Solution-to-Overscroll-Getting-Stuck
06-03
Android-Overscroll-Getting-Stuck 的解决方案在 StackOverflow 上看到一篇关于运行 4.x 及更高版本的设备上的 Android Overscroll 问题的帖子。 所以发布： : 过度滚动参考： ://jasonfry.co.uk/blog/android-...
IOS 的弹性滚动解决方案
09-01
在iOS中，为了使内联元素（如`<div>`）具有弹性滚动效果，开发者通常需要使用Webkit私有属性`-webkit-overflow-scrolling: touch;`。这个属性告诉浏览器允许内容区域在触摸事件下使用硬件加速的弹性滚动。然而，当在...
android-Overscroll-ListView:适用于android的具有'Bounce'效果的'Overscrollable'ListView！ 弹跳效果可以关闭
05-18
android-Overscroll-ListView 适用于android的具有'Bounce'效果的'Overscrollable'ListView！ 用法： 可以使用listview.setBounce（true / false）打开/关闭反弹效果。 动画延迟可以通过延迟变量（以毫秒为单位）...
前端项目-jquery-overscroll.zip
09-03
前端项目-jquery-overscroll,overscroll是一个jquery插件和polyfill，用于MobileSafari的溢出滚动样式。它旨在与最新版本的jquery一起在桌面浏览器上使用。
下拉溢出效果 overscroll-behavior：
Transicion tried to swim in lava
10-31 1849
该属性采用三个值： auto- 默认。源自元素的滚动可以传播到祖先元素。 contain- 防止滚动链接。滚动不会传播到祖先，但会显示节点内的局部效果。例如，Android 上的过度滚动发光效果或 iOS 上的橡皮筋效果，当用户到达滚动边界时会通知用户。注意：overscroll-behavior: contain在html元素上使用可防止过度滚动导航操作。 none- 与此相同，contain但它还可以防止节点本身内的过度滚动效果（例如 Android 过度滚动发光或 iOS 橡皮筋）。 ...
使用 CSS overscroll-behavior: contain 来防止滚动链
lio-zero 的博客
03-08 228
当用户滚动嵌入的网页(或网页上的任何嵌套滚动容器)并到达末尾时，浏览器将开始滚动外部页面。这被称为滚动链。 滚动链是指滚动从一个滚动容器传播到滚动链后面的祖先滚动容器。 一些用户可能会觉得这种行为很烦人。幸运的是，可以通过将 overscroll behavior: contain 应用于嵌入页面(或滚动容器)的 <body> 元素来禁用滚动链接。。 body { oversc...
使用 CSS overscroll-behavior 控制滚动行为：自定义下拉刷新和溢出效果
weixin_34364071的博客
11-15 462
dev-reading/fe 是一个阅读、导读、速读的 repo，不要依赖于 dev-reading/fe 学习知识。本 repo 只是一个快速了解文章内容的工具，并不提供全文解读和翻译。你可以通过本平台快速了解文章里面的内容，找到感兴趣的文章，然后去阅读全文。 本文地址：https://github.com/dev-readin... ...
overscroll-behavior 禁止橡皮筋效果
anairen3891的博客
06-19 338
目前尚兼容性不好 文章摘自：https://developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior overscroll-behaviorCSS 属性是overscroll-behavior-x和overscroll-behavior-y属性的合并写法, 让你可以控制浏览器过度滚动时的表现——也就是滚动到边...
控制页面的滚动:自定义下拉到刷新和溢出效果
itclanCoder
09-24 477
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击右上方,可关注本刊前言通过阅读本文,你可以通过css 中overcr...
css实现单独一区域滚动，不影响整体滚动，两种方法
qq_26889291的博客
06-29 4129
css实现单独一区域滚动，不影响整体滚动，两种方法
HTML中元素的滚动溢出影响其父级元素的滚动-overscroll-behavior
最新发布
JackieDYH的博客
01-18 587
在编写跨浏览器兼容的代码时，请考虑使用其他滚动事件相关属性或 JavaScript 来实现所需的滚动行为。是一个 CSS 属性，用于控制滚动事件在元素和其父级滚动容器之间的链接行为。这样，当用户在滚动元素时，滚动事件将仅在元素内部进行处理，不会传递给父级容器。是一个 CSS 属性，用于控制元素在滚动到边界时的滚动行为。该属性可以应用于任何具有滚动内容的元素，例如滚动容器（如。这样，当用户在滚动元素时，不会出现滚动溢出的效果。例如，要禁止滚动事件链接到父级滚动容器，可以将。
CSS Overscroll Behavior Module Level 1
奇舞周刊
06-24 229
编者按：本文作者奇舞团前端开发工程师何文力，同时也是 W3C CSS 工作组成员。6 月 6 日，W3C 发布了第一份滚动溢出行为工作组草案 CSS Overscroll...
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设备的弹性滚动效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值