原生overflow在ios上问题表现以及解决

最新推荐文章于 2022-06-12 14:22:32 发布
最新推荐文章于 2022-06-12 14:22:32 发布
阅读量1.2k 收藏
点赞数
分类专栏： js html 文章标签： html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/muyi19931220/article/details/84134709
版权
js 同时被 2 个专栏收录
8 篇文章 1 订阅
订阅专栏
html
6 篇文章 0 订阅
订阅专栏

原生overflow在ios上问题表现形式为：

         局部滚动时候，焦点在其他区域内滑动后， 在局部滚动区域就会滚动不了

问题原因暂不知道（知道原因的可以说一下）

解决问题方式：使用iscroll.js实现滚动，isscroll能解决大部分ios滚动不兼容的问题

Young-BeiJing
关注
专栏目录
【兼容性】ios上设置overflow: scroll不滚动bug
生如夏花 炫至茶靡
10-13 2万+
背景 目前遇到这么一个问题：我有一个可以向下展开的下来菜单，菜单初始高度大于300px左右，没有超过手机屏幕高度，当展开的时候如果超过手机屏幕高度时让父元素出现滚动条滚动，就是说内容的高度是动态的。 描述 此前我通过js动态获取屏幕高度，并设置为父元素的max-height。然后设置父元素overflow-y: scroll; 起初，我大概的代码布局如下： <div className...
解决页面使用overflow: scroll在iOS上滑动卡顿的问题1
08-03
标题中的“解决页面使用overflow: scroll在iOS上滑动卡顿的问题1”指的是在iOS设备上，当HTML元素使用CSS属性`overflow: scroll`时，滚动可能会变得卡顿不顺畅。这个问题通常不会在Android设备上出现，使得开发者...
iOS 对overflow：scroll使用
weixin_33724570的博客
10-30 214
让子标签的高度在初始化的时候就比父标签大，可以设置height： 101%；这样就出发了内置的scrollview的滚动。 -webkit-overflow-scrolling:touch;可以让滚动更自然流畅。 转载于:https://www.cnblogs.com/chzlh/p/9878490.html...
处理ios的overflow滚动bug
weixin_34348174的博客
11-30 364
先说说这个bug的场景 .container{ height:100vh; overflow-y:scroll; } 没毛病，总有这种类似的情况，需要在容器内滚动，但是！这种容器内的滚动在ios上面处理的情况是类似于 -webkit-overflow-scrolling:auto; 什么意思？ 就是滑动的时候，当手离开屏幕的那一刻，滚动立即停止（fr...
Vue overflow在ios滚动不流畅问题
林中明月间丶
01-18 1286
https://blog.csdn.net/mrhaoxiaojun/article/details/78647029 https://blog.csdn.net/angularWQ/article/details/79244938 https://blog.csdn.net/terryMei/article/details/83060117 在 overflow:scroll部分，也就是...
ios 苹果不兼容overflow:scroll
任某某的博客
08-21 971
场景 下拉加载的过程是懒加载, 父元素的容器是动态高度而不是固定的, 需求是要求手机1屏展示,也就是说,父元素的高度是固定的.超出部分滚动 bug 原理: bug原理,点击进入 代码 这个-135px 因为我们需要是1屏高度减去导航栏的高度剩余高度就是父元素的固定高度 解决 让存放list的元素最小高度大于父元素高度 +1，然后给父元素添加 -webkit-overflow-scrolling: touch;属性，这样可以令一开始的时候就添加一个scrollView ...
在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案
01-05
解决办法： 滚动之前，先设-webit-overflow-scrolling的属性值为auto，然后页面滚动完了，再设为touch即可。 实例： $(#id).css('-webkit-overflow-scrolling','auto'); $(#id).scrollTop(9999); $(#id).css('-...
微信小程序在ios下Echarts图表不能滑动的问题解决
12-10
为了解决原生组件层级过高的问题，微信小程序提供了`cover-view`和`cover-image`组件，它们是原生组件，可以覆盖在其他原生组件之上。然而，尽管将`view`替换为`cover-view`可以覆盖`canvas`，但在iOS设备上仍然无法...
mui的picker在ios上滑动页面错乱的解决办法
最新发布
08-23
6. **自定义实现**：如果以上方法都不能解决问题，可以考虑自定义一个适合iOS平台的Picker组件，以完全规避原生MUI Picker可能引发的问题。 最后，测试和调试是解决这类问题的关键。在不同型号的iOS设备上进行充分...
IOS上iframe的滚动条失效的解决办法
09-01
在iOS设备上，如iPad和iPhone，用户可能会遇到一个特定的问题，那就是在使用`iframe`时，滚动条无法正常工作。当`iframe`的内容高度超过其设定的高度时，内部HTML的滚动条不会显示，导致超出部分的内容无法查看，...
overflow:hidden在移动端iOS失效的解决方案
qq_45021462的博客
06-12 2926
overflow:hidden在移动端iOS失效的解决方案
overflow-x: auto在iOS有兼容问题
flowRight的博客
05-08 3500
解决办法 -webkit-overflow-scrolling: touch;
overflow 兼容ios
hjy170314的博客
01-02 278
ios中直接使用overflow:hidden会有一些小卡顿问题,需要加入一句 -webkit-overflow-scrolling : touch;
解决overflow: auto在Ios中滑动不流畅
热门推荐
David
07-12 1万+
【bug】—— H5页面在 ios 端滑动不流畅的问题 IOS系统的惯性滑动效果非常6，但是当我们对div加overflow-y:auto;后是不会出这个效果的，滑动的时候会感觉很生涩。怎么办？ 方案一： 在滚动容器内加-webkit-overflow-scrolling: touch 但这个方案有一个问题，在页面内具有多个overflow：auto的情况下，那些具有
IOS不支持overflow: hidden;
wy_Blog的博客
01-17 4544
把下边代码放上就好咯 .css{ height: 100%; overflow: hidden; width: 100%; position: fixed; }
h5苹果ios系统中overflow: auto滑动不流畅
dnpao的专栏
08-02 7936
方案一： 在滚动容器内加-webkit-overflow-scrolling: touch 但这个方案有一个问题，在页面内具有多个overflow：auto的情况下，那些具有 绝对定位（absolute, fixed） 属性的元素，也会跟着滚动。 方案二： body {overflow-x: hidden} 即，给 body 元素添加overflow-x：
解决iPhone中overflow:scroll;滑动速度慢或者卡的问题
蓝色的乌鸦的专栏
08-26 1万+
在移动端html中经常出现横向/纵向滚动的效果,但是在iPhone中滚动速度很慢,感觉不流畅,有种卡卡的感觉,但是在安卓设备上没有这种感觉; 要解决这个问题很简单: 一行代码搞定 -webkit-overflow-scrolling : touch;
苹果端部分版本使overflow失效
SiShen654的博客
10-12 1085
原因在于苹果端旧版本transform会使overflow失效，只需要在transform里面将**translateZ(0)**添加上去即可 transform: translateZ(0);
HTML页面在IOS上出现卡顿的解决方案(overflow：scroll)
BlueKitty的博客
12-21 9877
之前在给app做html页面时出现一个奇怪的一个问题 , 相同的一个网页 , 在Android上非常流畅无任何问题 , 而在IOS端浏览时 , 页面滑动起来有明显的卡顿感 . 经网上搜索了解后 , 发现页面中使用了overflow：scroll属性所致(在滑动的div上添加该属性) . 由于本人对前端不甚了解 , 不知道是HTML的问题还是IOS的问题 , 具体谁的锅也无法得知 .     对此
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值