苹果浏览器滚动会卡顿的问题

最新推荐文章于 2022-05-26 04:34:42 发布
最新推荐文章于 2022-05-26 04:34:42 发布
阅读量2.4k 收藏 1
点赞数
分类专栏： React 文章标签： 苹果 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Juniorselk/article/details/78436583
版权
加一个属性到滚动盒子上： 
-webkit-overflow-scrolling:touch
ios上滚动条不能滑动 滚动卡住的问题
江拥羡橙的博客
12-02 972
3.滑动容器的所有父元素添加样式（只给要滚动父容器添加即可）iosapp上viewweb h5不能滑动的问题。1.给滑动容器添加样式。
android帧动画卡顿现象,css3针对移动端卡顿问题的解决(动画性能优化)
weixin_32903229的博客
05-25 1219
一、使用css，jquery，canvas制作动画1.Canvas优点：性能好，强大，支持多数浏览器(除了IE6、IE7、IE8)，画出来的图形可以直接保存为 .png 或者 .jpg的图形；缺点：依赖于HTML，只能通过脚本绘制图形，没有实现动画的API(依靠事件和定时器更新)；由于在 canvas 上以编程方式显示的文本其实就是位图，因此搜索爬行器将完全忽略文本。文本内容也无法被屏幕阅读器识别...
浏览器卡怎么办_iPhone很卡怎么办？5个方法教你轻松解决！
weixin_39568597的博客
11-14 3352
很多朋友可能会遇到iPhone越用越卡的情况，怎么办呢？是不是自己的手机已经到了生命的终点了，又要换新手机了。别放弃，它还是可以再抢救一下的，下面介绍的5个方法可以让手机变得流畅起来，但是无法解决系统升级带来的卡顿哦。1、减弱动态效果伴随着iOS系统的不断更新，iPhone的动画效果真的很好看，但是，随之而来的还有手机变得越来越卡，对于旧型号小内存的手机来说，更是灾难。所以解决的方法就是把这个动态...
html页面在safari浏览器中滑动不流畅问题
huyihan_的博客
09-21 4550
给有滚动条的元素添加：-webkit-overflow-scrolling:touch; 如 main{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
vue：项目页面在苹果手机浏览器上上下滑动出现卡顿现象
黄孝果的博客
05-14 1万+
在公用的样式底部加上 -webkit-overflow-scrolling: touch;
ios端页面滚动出现卡顿的原因之一
jinxi1112的博客
10-12 1593
如果给body或html设置了高度100%，ios端会出现图片滑动卡顿，将height去掉就好了 body{ /*height:100%;*/ } html{ /*height:100%;*/ }
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
10-17
针对Vue开发的移动端界面在苹果手机上出现的滑动卡顿和点击事件响应缓慢问题，我们可以从以下几个方面来理解和解决问题。 首先，关于滑动卡顿的问题，一个常见的解决方案是在对应组件的最外层div上使用特定的样式。...
解决页面使用overflow: scroll在iOS上滑动卡顿的问题1
08-03
标题中的“解决页面使用overflow: scroll在iOS上滑动卡顿的问题1”指的是在iOS设备上，当HTML元素使用CSS属性`overflow: scroll`时，滚动可能会变得卡顿不顺畅。这个问题通常不会在Android设备上出现，使得开发者...
vue大数据表格卡顿问题的完美解决方案
01-19
亲测苹果电脑，chrome浏览器无卡顿现象，其它浏览器并未测试，如遇到卡顿请备注系统和浏览器，方便我后续优化，谢谢 先看一下效果,一共1000 X 100 = 10W个单元格基本感受不到卡顿，而且每个单元格点击可以编辑，支持...
网页在Safari快速滚动和回弹的原理： -webkit-overflow-scrolling : touch;的实现
热门推荐
心流汇聚之地
06-27 11万+
现在很多for Mobile的H5网页内都有快速滚动和回弹的效果，看上去和原生app的效率都有得一拼。 要实现这个效果很简单，只需要加一行css代码即可： -webkit-overflow-scrolling : touch;可用以下网页测试： scroll .container {
mac 自带Safari浏览器 页面卡死 不动
Shimeng_1989的博客
07-11 2万+
可能是Safari插件引起的问题。 解决：打开finder - > Macintosh HD -> 资源库 ->Internet Plug-Ins 把里面Safari的插件删掉。然后重启电脑 （如果finder中找不到，可尝试一下方法，或去百度自行搜索） 解决方法：点击finder，再左上角的finder中选择 "偏好设置"， 点击"边栏"，勾选磁盘（看清楚，可...
苹果手机上滑动会卡顿_苹果手机Safari浏览器下滑动卡顿的问题
weixin_39611765的博客
12-22 1019
一、缘起最近在做一个项目，项目是在微信的内置浏览器上面运行的，其实就是做一个Web App，然后套在微信里面跑。那么问题来了：Web App的首页在安卓手机上一切正常，可是一到苹果手机，首页的滑动就变卡顿了，经常拉出半截页面，底部不翼而飞。登录拦截页面使用了localStorage作为本地存储，安卓手机依旧正常，苹果这厮却无限跳转登录页。二、造成差异的原因列位看官应该都知道，PC端浏览器浏览效果的...
ios（safari）浏览器滑动卡顿，橡皮筋效果解决
南宫凌萱的博客
02-25 2849
滑动卡顿：  html,body{             width:100%;             height:100%;         }         *{           -webkit-overflow-scrolling: touch;         } 设置 -webkit-overflow-scrolling: touch;则可以解决大部分问题 橡皮筋效果：...
关于移动端滑动卡顿现象的解决方案
GrowthHacker的博客
03-12 2万+
-webkit-overflow-scrolling: touch IOS 端特属属性，手指离开屏幕会保持滚动一段距离，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。 overflow: scroll; //该属性随着手指离开立即停止 -webkit-overflow-scrolling: touch;//该属性随着手指离开还会保持滚动 -webkit-transform: ...
解决Mac M1版本IDEA滑动卡顿问题（适用于所有M系列的PC）
lixuedongmagic的博客
05-26 3793
解决Mac M1版本IDEA滑动卡顿问题
h5页面底部吸底，在苹果浏览器吸底部分到导航栏下方
最新发布
04-01
<think>嗯，用户的问题是关于H5页面在苹果Safari浏览器中底部吸底元素被导航栏遮挡的情况，需要找到解决方案。首先，我得回忆一下之前处理过类似的问题，或者查找相关的资料。记得iOS的Safari浏览器，特别是微信内置浏览器，有时候会有工具栏自动出现，导致页面布局错乱。用户提到使用固定定位（fixed）时，底部元素会被遮挡，这可能和视口的高度计算有关。 首先，固定定位的元素通常会相对于视口定位，但iOS的视口高度可能包括地址栏和工具栏，当它们显示或隐藏时，视口高度会变化，导致元素位置不正确。比如，使用`position: fixed; bottom: 0;`时，元素可能会被工具栏覆盖。 然后想到可能需要动态计算高度，使用JavaScript来调整底部元素的位置。比如，通过获取窗口的实际高度，然后设置元素的`bottom`值为工具栏的高度，或者使用`env(safe-area-inset-bottom)`来处理安全区域。但`env()`函数可能需要特定的设置，比如在meta标签中设置`viewport-fit=cover`，这样才能生效。 另外，用户提到的引用中有提到引入inobounce.js会导致页面无法滚动，需要给滚动区域设置固定高度和`overflow: auto`，以及`-webkit-overflow-scrolling: touch`来改善滚动效果。但这里的问题是关于底部固定定位，可能需要结合这些信息。 还有，CSS的`-webkit-appearance: none;`可以重置表单元素的默认样式，但和当前问题关系不大。不过，用户引用中提到iOS的遮挡问题，可能需要检查是否有其他样式冲突。 总结可能的解决方案步骤： 1. 使用`viewport-fit=cover`来让页面覆盖整个屏幕，包括安全区域。 2. 使用`env(safe-area-inset-bottom)`来调整底部元素的padding或margin，避免被导航栏遮挡。 3. 动态计算窗口高度，通过JavaScript调整元素的位置。 4. 检查固定定位是否正确应用，是否有父元素的transform影响定位。 5. 考虑使用弹性布局或绝对定位作为替代方案，根据情况选择。 还需要验证这些方法是否在Safari和微信内置浏览器中有效，特别是iOS的版本兼容性。例如，`env()`可能需要较新的系统支持，可能需要备选方案。同时，测试不同场景下工具栏的显示隐藏对布局的影响，确保动态调整能实时响应。</think>### H5页面底部吸底被iOS导航栏遮挡的解决方案 #### 问题分析 在iOS Safari浏览器中，底部固定定位元素（如吸底按钮）可能被浏览器自带的底部导航栏遮挡，主要原因是iOS的视口高度计算方式与常规浏览器不同[^3]。当使用`position: fixed`时，元素会基于视口的初始高度定位，而忽略动态变化的可视区域高度[^1]。 --- #### 解决方案步骤 1. **设置视口适配安全区域** 在HTML的`<meta>`标签中添加`viewport-fit=cover`属性，允许页面内容延伸到屏幕安全区域： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> ``` 2. **使用安全区域环境变量** 通过CSS的`env()`函数适配底部安全距离，避免遮挡： ```css .bottom-fixed { position: fixed; bottom: 0; /* 添加安全区域间距 */ padding-bottom: env(safe-area-inset-bottom); width: 100%; background: white; } ``` 3. **动态计算高度（备选方案）** 若需兼容旧版本iOS，可通过JavaScript动态调整底部元素高度： ```javascript function adjustBottom() { const bottomBar = document.querySelector('.bottom-fixed'); const viewportHeight = window.innerHeight; bottomBar.style.bottom = `${viewportHeight - document.documentElement.scrollHeight}px`; } window.addEventListener('resize', adjustBottom); ``` 4. **检查滚动容器设置** 如果页面包含滚动区域，需确保滚动容器设置以下属性以避免iOS滚动卡顿： ```css .scroll-container { height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } ``` --- #### 关键注意事项 - **避免`position: fixed`父级变换**：若父元素设置了`transform`或`filter`属性，会导致`fixed`定位失效[^4]。 - **测试工具栏动态显示**：iOS导航栏可能在页面滚动时隐藏/显示，需通过`resize`事件监听实时调整布局。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值