ios环境下使用了overflow-y: scroll;后页面不流畅问题

最新推荐文章于 2023-02-13 16:44:31 发布

原创最新推荐文章于 2023-02-13 16:44:31 发布 · 470 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了在iOS设备上使用overflow-y:scroll;导致的滚动不流畅问题及解决方案，通过添加-webkit-overflow-scrolling:touch改善体验，但可能遇到滑动至底部时的滑动限制。文中提出在子div设置min-height:101%来避免此问题。

页面中使用了 overflow-y: scroll;

ios浏览时，会不够流畅

可以在当前css中添加：

-webkit-overflow-scrolling: touch

但这又会导致一个问题，那就是你滑动页面到底部的时候，偶尔会发现，页面滑动不了了

这时可以在当前div下的子div添加

style="min-height:101%"

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yixiancheng

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

overflow-touch:在 iOS Safari 上使用 overflow-y 的 Web 元素的简单通知覆盖，通知他们可以使用两个手指滚动

07-09

溢出触摸这是一种非常简单的方法，可以告诉使用 Safari 的 iPhone/iPod Touch/iPad(?) 用户，他们可以使用两根手指滚动浏览页面元素，否则在完整浏览器中将具有滚动条（overflow-y CSS 属性设置为除了没有之外的其他东西）。用法假设您没有为您的网站使用特别奇特的架构，只需将 repo 中的文件放入您的 webroot 并从您的 webroot 中的任何页面调用 setIosOverlay 函数。该函数接受参数 element_id，它是您希望叠加层出现的元素的 DOM id。例子在您的<head> ，添加以下引用： [removed][removed] 在您的<body>末尾附近，在您要应用叠加层的元素声明之后的某个位置： <script typ

解决页面使用overflow: scroll在iOS上滑动卡顿的问题1

08-03

标题中的“解决页面使用overflow: scroll在iOS上滑动卡顿的问题1”指的是在iOS设备上，当HTML元素使用CSS属性`overflow: scroll`时，滚动可能会变得卡顿不顺畅。这个问题通常不会在Android设备上出现，使得开发者...

参与评论您还未登录，请先登录后发表或查看评论

深入研究-webkit-overflow-scrolling:touch及ios滚动 overflow-y: scroll;

weixin_30731287的博客

06-28

450

在移动端上，在你用overflow-y:scorll属性的时候，你会发现滚动的效果很木，很慢，这时候可以使用-webkit-overflow-scrolling:touch这个属性，让滚动条产生滚动回弹的效果，就像ios原生的滚动条一样流畅。 -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移...

关于overflow-y:scroll ios设备不流畅的问题

weixin_30388677的博客

10-20

135

最近做双创项目的时候因为页面有很多数据显示，所以打算让它Y轴方向滚动条的形式展现，但在测试阶段发现IOS设备滑动效果非常不理想； search by google之后找到解决办法： -webkit-overflow-scrolling: touch; 网友解释该属性启动了硬件加速的特性，所以滑动起来会非常流畅；不过会影响性能；经过测试，性能影响忽略不计。转载于...

【记录】ios overflow-y:scroll 滑动不流畅

qq_30068989的博客

02-22

742

css 在需要滚动的容器添加，但是会伴随出现一些问题，曾遭遇时而无法滚动的情况 -webkit-overflow-scrolling : touch; 解决详细参考：https://www.cnblogs.com/hrone/p/10143960.html ...

【CSS兼容问题】ios和android兼容问题 -- overflow-y : auto层级过高

每天进步一点点, 靠近小目标一点点~

11-02

1253

ios设备上 , overflow-y:auto 属性层级非常高, 连position和z-index都没法撼动

详解overflow-scrolling解决滚动卡顿问题

01-18

如果你对某个div或模块使用了overflow: scroll属性，在iOS系统的手机上浏览时，则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。解决方法以下代码可解决这种卡顿的问题：-webkit-overflow-...

解决页面使用overflow: scroll，overflow-y:hidden在iOS上滑动卡顿的问题

06-08

在 iOS 上，使用 `overflow: scroll` 或 `overflow-y:hidden` 时会出现滑动卡顿的问题，这是因为 iOS 会将页面内容放在一个滚动层中，而滚动层的滚动速度比页面的滚动速度慢，导致滑动卡顿。为了解决这个问题，可以...

overflow-x: scroll超出部分隐藏掉但是不能滑动？

08-27

在 CSS 中使用 `overflow-x: scroll` 属性时，如果内容超出容器宽度但仍无法滑动，通常是因为某些样式设置或浏览器默认行为干扰了滚动功能。以下是解决该问题的几种方法： ### 1. 明确设置容器宽度和子元素宽度 ...

overflow-x: scroll;如何显示滚动条？

最新发布

09-12

使用 `overflow-x: scroll;` 显示滚动条可采用以下方法： 1. **设置 CSS 让滚动条可见**：为目标元素添加特定类名，如 `scrollBox`，并设置相关样式。 ```css .scrollBox { overflow-x: scroll; overflow-y: ...

iphone手机overflow-y: iscroll 滑动卡

y花落无痕y

11-07

1357

在容器元素上添加属性： -webkit-overflow-scrolling: touch;详细案例：查看案例

解决ios的scroll滑动不流畅问题（一行代码搞定）

qq_45043019的博客

09-10

2710

当使用overflow-y: scroll;后，IOS滑动不流畅，css加一条属性即可 “ -webkit-overflow-scrolling: touch; ” 例???? .box{ overflow-y: scroll; touch-action: pan-y; -webkit-overflow-scrolling: touch; } 其中 “-webkit-overflow-scrolling” 除了touch外还有touch属性详解???? auto：使用普通滚动,

IOS 游览器 overflow失效弹窗功能，禁止滑动失效等，解决方案：

weixin_54515240的博客

09-24

2510

IOS 游览器 overflow失效弹窗功能，禁止滑动失效等，解决方案：

ios 苹果不兼容overflow:scroll

任某某的博客

08-21

1032

场景下拉加载的过程是懒加载, 父元素的容器是动态高度而不是固定的, 需求是要求手机1屏展示,也就是说,父元素的高度是固定的.超出部分滚动 bug 原理: bug原理,点击进入代码这个-135px 因为我们需要是1屏高度减去导航栏的高度剩余高度就是父元素的固定高度解决让存放list的元素最小高度大于父元素高度 +1，然后给父元素添加 -webkit-overflow-scrolling: touch;属性，这样可以令一开始的时候就添加一个scrollView ...

html scroll 自动,html – DIV设置为overflow：scroll,但不会一直滚动到底部

weixin_42303389的博客

05-30

976

我有一个DIV菜单设置为100％的高度与溢出：滚动.在DIV里面我有一个ul li.我的问题是,它不会让我滚动一下看到最后一个李.我几乎看不到它.我认为它与我的标题有关,因为当我删除标题时,我可以看到它.当我放回标题时,它会放在浏览器下方,不能一直滚动到最后一个li.li和header几乎是相同的高度,这是很有意义的头是导致问题.不是特别的标题,我想,但更多的是我在CSS中做的事情.为什么不能滚动...

iOS Safari上overflow: scroll无法滑动解决

MichaelAn的博客

02-13

3176

iOS Safari上overflow: scroll无法滑动解决问题描述此bug出现需要条件：父元素需使用绝对定位absolute或固定定位fixed，使用overflow: scroll / auto(或overflow-y: scroll / auto)，内部子元素是动态大小(例如较大的svg docume...

css overflow: scroll 去滚动条后，低端手机有兼容问题，可以这样

会飞的程序猿

10-15

588

// 去除滑动条，但是低端机有兼容性问题，可以最外层加个div，样式如：.css-jc .overflow::-webkit-scrollbar { display:none; } .css-jc { height: 1.55rem; padding: .2rem .4rem; overflow: hidden; } .css-main { overflow: scroll; font-size: 0; white-spac.

overflow-x: auto在iOS有兼容问题

flowRight的博客

05-08

3654

解决办法 -webkit-overflow-scrolling: touch;

iOS Safari浏览器上overflow: scroll元素无法滑动bug解决方法整理

weixin_33851429的博客

01-09

3649

描述此bug出现需要条件：父元素需使用绝对定位absolute或固定定位fixed，使用overflow: scroll / auto（或overflow-y: scroll / auto)，内部子元素是动态大小（例如较大的svg document，近似为内嵌iframe，等等）。 bug出现原因：没有相关官方文档描述该bug。在查阅文...