ios嵌入h5去掉“橡皮筋”回弹

最新推荐文章于 2024-01-30 11:34:36 发布
原创 最新推荐文章于 2024-01-30 11:34:36 发布 · 2.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ios #html5

本文介绍了在iOS设备上，H5页面顶部和底部滑动时出现的'橡皮筋'回弹现象，以及如何解决这一问题。通过使用iNoBounce插件，监听touchmove事件并阻止默认行为，可以实现无回弹的平滑滚动。同时，注意-webkit-overflow-scrolling: touch可能导致z-index失效，以及padding可能导致的回弹问题，这些问题可以通过调整布局和使用margin来规避。

UI在走查页面的时候好几次提到了这个问题，在h5页面最顶部或者底部拉页面的时候，还会出现一块页面之外的空白，松开手页面回弹回去，UI表示这样看起来页面像是截断了很不友好，能否拉了之后还是背景色而不是白色。

首先想到的就是外面包一层高度为需要视窗高度的fixed div，然后让里面的内容滚动。可惜的是在ios上滑动出现问题——当scroll bar消失后，页面滑不动了。

于是搜索一下怎么去掉ios的“橡皮筋”，于是看到了插件iNoBounce，其原理就是在支持-webkit-overflow-scrolling属性的元素上监听touchmove事件，用Js实现子元素的滚动，并且当到边界的时候，event.preventDefalut()来控制不要继续滑动。

所以依旧还是在整个页面外面包一层div，将div设置为视口高度，内部的div加上：

height: 100%;

overflow-y: scroll;

 -webkit-overflow-scrolling: touch;

这样就解决了橡皮筋的问题。

不过要注意的是， -webkit-overflow-scrolling: touch;这个会让内部的一些z-index失效【仅ios上失效】，所以还得看看页面有没有哪里是有问题的。

记录一下坑：

 

这个作者貌似并没有改过来。

还有一个issue问题就是padding-top/padding-bottom依旧会触发整个页面的橡皮筋回弹：

 没办法，把padding改成margin看起来就是可以的。

这个库坑太多，复杂页面慎用

移动开发WebView的输入框交互优化
移动开发前沿的博客
06-02 1205
你是否遇到过这样的场景：用户在App的H5页面输入评论时，键盘突然遮挡输入框，只能盲打；或者点击输入框后，键盘延迟1秒才弹出，用户以为“卡住了”；甚至输入一半，焦点突然丢失，内容全没了……这些问题都指向一个核心——WebView输入框的交互优化。本文将覆盖iOS/Android双平台，从问题根源到具体代码实现，帮你彻底解决这些痛点。本文将按照“问题现象→原理分析→优化策略→实战代码→测试验证”的逻辑展开，先通过生活案例引出问题，再拆解WebView输入框的“底层运作逻辑”，最后给出可落地的优化方案。
[UNIAPP系列] IOS端取消橡皮筋回弹效果
weixin_45969775的博客
01-12 3340
APP-IOS端取消橡皮筋回弹效果
H5解决IOS橡皮筋问题(改进Vue)
qq_51632313的博客
12-24 2355
H5解决IOS橡皮筋(改进Vue) 在ios系统中，页面在上下滑动的时候，会触发橡皮筋问题，页面的顶部和底部跟着页面一起滑动的问题，下面就讲一下如何解决这种问题。 1、iOS如何阻止“橡皮筋效果”？ HTML 需要滚动的元素 CSS .wrapper { overflow: auto; -webkit-overflow-scrolling: touch; } 但是 iOS Safari 在滑动的时候会有讨厌的 “橡皮筋效果” （Over Scroll）： 设计： ┌─────────────┐ │ Hea
IOS取消“橡皮筋“效果
weixin_42043610的博客
02-22 1264
一个后端转前端的小白，只懂一些基础的html、css，做项目时，本来是用的antd-mobile的NavBar组件，一个会固定在顶部的导航栏，但是IOS滑动会有"橡皮筋"效果，会拉出一大片空白，产品说导航栏没固定在顶部不行呀，于是查找了很多资料解决了，这里记录一下。 相关资料说是用position: fixed可以解决，于是在页面设置： position: fixed; left: 0; right: 0; top: 0; bottom: 0; 然后发现，好吧，页面自带的滚动条都滚动不了了，在需要滚动条的
iOS橡皮筋回弹
落下香樟树
10-23 1723
处理iOS端橡皮回弹效果 近期开发的项目有一部分是与微信公众号相关的H5页面，在Android端微信上页面效果展示无异常，但是在 iOS端微信多多少少会出现一些意想不到的bug。此次主要针对移动端H5页面在iOS端产生的 橡皮回弹（橡皮筋效果）问题做一下相关记录，希望对遇到类似问题的同学有所帮助。 方案一：使用 inobounce.js inobounce.js github地址 在 html主页面的 header 标签中引入inbounce.js，即 。当引入此文件之后，iOS端整个页面都无法滑动
禁止 ios H5 中 bounces 滑动回弹效果
天问博客-专注于大前端技术
01-30 7444
在开发面向 iOS 设备的 HTML5 应用时，控制页面的滚动行为至关重要，特别是禁用在 Safari 中默认的滑动回弹效果。本文旨在提供一个简洁明了的解决方案，帮助开发者在特定的 Web 应用中禁用这一效果。
【教程】在 H5 中禁用 iOS 滚动的橡皮筋行为
a862360493的博客
10-17 3589
overscroll-behavior用于控制元素在滚动到边界时的行为。它可以应用于任何具有滚动行为的元素，例如滚动容器（如滚动条、滚动视图）或具有overflow: auto或overflow: scroll样式的元素。
禁止IOS H5的滑动回弹
weixin_41786576的博客
11-23 5024
我们在开发h5页面时不知道大家发现这个问题没，在水果机上，页面会有弹性，有时候我们滑动中间部分时，有时候header、footer部分会跟着动(在此之前疯狂百度过很多方法都没解决，水群的时候也看到很多人也遇到过这个问题，今天无意中发现一个库能解决这个问题) 想禁止这个行为只要引入一个库就可以了 github地址 <script src="./inobounce.js"></s...
去除IOS橡皮筋效果
前端技术分享
12-26 6422
All you need is an element with height or max-height, overflow: auto and -webkit-overflow-scrolling: touch. script src="inobounce.js">script> style> ul { height: 115px; borde
H5禁止ios回弹效果
john987321456的博客
02-05 6565
IOS的移动端H5页面滚动浏览器到底部或者在整个页面被往上拉的时候都会出现一个回弹的效果。 如果想禁止整个回弹效果，那么 首先、引入inobounce.js库，就可以禁止body的滚动 下载地址： inobounce.js的github地址 其次、在需要滚动的元素上加上height,overflow,-webkit-overflow-scrolling: touch属性就可以了 案例展示： <script src="inobounce.js"></script> <style&
苹果手机IOS 禁止H5的滑动回弹
吴文静的博客
08-05 4985
IOS的移动端/H5/webapp 页面如果滚动到底部或者在页面顶部再往上拉，都会出现一个回弹的效果。 想取消这个效果可以引入一个简单的库就行，不用再写繁琐的样式。 下载这个inobounce.js github地址 直接引入js <script src="inobounce.js"></script> 例子： 因为这个库是禁止了整个页面的滑动，所以如果页面中有其他元素需要滑动的，要给滑动元素设置一个height或max-height,还有overflow: auto; -webk
禁止IOS H5的滑动回弹问题
Chenming_321的博客
01-16 4090
想禁止这个行为只要引入一个库就可以了 gitHub <script src="./inobounce.min.js"></script> 这个库是禁止了整个页面的滑动,我们需要在滚动的盒子外面加上height or max-height, overflow: auto , -webkit-overflow-scrolling: touch ok ...
苹果手机内嵌h5如何禁止全局弹性效果
程序员超超的博客
11-20 1160
简单模拟一个场景，这是一个商城的商品分类页面，是一个左右布局，左面是所有的分类，右面是展示这个分类的商品，这里为了简单就只写一个demo了。区域滑动时，也会触发全局的弹性效果。这个时候很容易造成意想不到的交互问题，这个时候我们需要禁用掉全局的弹性效果，可以在。之后，这块区域都会有回弹效果，这个是苹果手机自带的。然而默认情况下，全局也是自带回弹效果的（这里全局指的是。如果在苹果手机上，默认情况下，某块区域设置。注意绿色和蓝色上面和下面的白色区域。，那么如果子组件高度，超过了。的高度，那你子组件就需要设置。
app嵌套h5，ios下去掉上下橡皮筋的效果（上下回弹）
何婷的博客
10-10 4448
app嵌套h5，ios下去掉上下橡皮筋的效果（上下回弹） 如果是前端自己解决的话会非常的费劲，我今天跟app开发的沟通了一下，他们很快的就解决了，所以直接用原生解决就行，不要下功夫找各种解决方法，到最后都是枉然，这个我是总结的，当然有好的办法可以分享给我哟 ...
取消苹果手机浏览器自带的橡皮筋效果
qq_21936241的博客
05-26 459
最近在做H5遇到苹果手机自带的浏览器上滑、下拉都会出现空白橡皮筋效果，看了好多帖子，又是监听y坐标等等之类的，尝试了都没有用。最后发现加这个css就好了，又是记录踩坑的一天。
禁用iOS的弹性滑动效果
weixin_38724114的博客
05-26 4115
原文地址： https://blog.youkuaiyun.com/qq_33248419/article/details/103851777 h5页面如何禁用iOS的弹性滑动效果，找到了一篇很好的文章，分享给大家。 根组件 <template> <div class="scroll" ref="scroll"> <slot></slot> </div> </template> <script> export de
解决h5嵌套ios中的橡皮筋效果
@随性的博客
05-11 2212
最近公司功能需求要把新开发的h5页面嵌入ios端app中，遇到这个让人很是头疼的一个问题，h5页面在ios端，页面一直存在回弹效果。如果直接对body禁止的话，然后个页面都无法滑动了。今天终于搞定了这个问题,特此记录下 由于公司要求用vue3.0开发，所以在此就直接用3.0来记录了。 一 首先我们要在 setup()中定义两个方法 注意 ：此处的方法需要return出去，方可使用 setup(){ // 滑动开始获取初始位置坐标 function touchstartFunction(e)
禁止H5页面在iOS系统中滑动回弹效果
热门推荐
weixin_44828588的博客
07-21 1万+
次主要针对移动端H5页面在iOS端产生的橡皮回弹（橡皮筋效果）问题做一下相关记录，希望对遇到类似问题的同学有所帮助。
阻止ios浏览器的滑动回弹效果
supertree_l的博客
03-20 5226
document.body.addEventListener('touchmove', function (e) { e.preventDefault() // 阻止默认的处理方式(阻止下拉滑动的效果) }, {passive: false}) // passive 参数不能省略，用来兼容ios和android ...
ios端h5页面橡皮筋效果
最新发布
02-27
### iOS H5 页面实现橡皮筋回弹效果的方法 为了实现在iOS端H5页面中的橡皮筋（回弹）效果，可以通过CSS属性`overscroll-behavior`来控制滚动行为。此属性定义了当用户尝试滚动超出范围时的行为方式。 对于希望保留并优化橡皮筋效果的情况，可以考虑以下方法： #### 使用 `overscroll-behavior` 通过设置`overscroll-behavior-y: contain;`可以让溢出区域内的内容不会影响外部布局，并保持自然的弹性反馈[^4]。 ```css html, body { height: 100%; overflow: hidden; } .wrapper { overscroll-behavior-y: contain; height: 100vh; overflow-y: scroll; } ``` 这段代码创建了一个包裹器`.wrapper`用于容纳主要内容，同时设置了高度为视窗的高度(`100vh`)以及允许垂直方向上的滚动。重要的是应用了`overscroll-behavior-y: contain;`使得即使在滚动至边缘时也不会触发父级或其他元素的动作，从而维持良好的用户体验。 #### 防止穿透现象 为了避免因橡皮筋效应而产生的点击事件穿透问题，可以在HTML结构中加入一层遮罩层，该遮罩仅在检测到接近边界的情况下显示出来阻止交互操作[^1]。 ```javascript document.addEventListener('touchmove', function(event){ var top = document.documentElement.scrollTop || document.body.scrollTop; if(top === 0 && event.touches[0].pageY < 80){ // 判断是否处于顶部附近 event.preventDefault(); // 取消默认动作防止穿透 } }, { passive: false }); ``` 上述JavaScript片段监听触摸移动事件，在判断当前位于页面顶端且触控位置较低时调用`event.preventDefault()`中断默认处理逻辑，有效避免误触底层原生组件的可能性。 #### 自定义视觉样式 如果想要改变默认白色的空白区颜色，可通过调整body标签下的背景色来自定义这部分空间的颜色表现形式[^3]。 ```css body { background-color: #f7f7f7; /* 设置自定义背景色 */ } ``` 这将使整个文档拥有统一的底色，即便是在发生过滚情况下也能提供一致性的外观体验。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值