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

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

yixiancheng

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

阅读量445

点赞数

本文链接：https://blog.youkuaiyun.com/yixiancheng/article/details/107219475

版权

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

ios浏览时，会不够流畅

可以在当前css中添加：

-webkit-overflow-scrolling: touch

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

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

style="min-height:101%"

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yixiancheng

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

weixin_44415368的博客

07-27

172

-webkit-overflow-scrolling:touch是什么？ *MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动...

js解决overflow：scroll失效问题

热门推荐

weixin_34128534的博客

07-03

1万+

用JS有效解决移动w用JS有效解决移动web浏览器中HTML元素的overflow:sceb浏览器中HTML元素的overflow:scroll滚动属性失效问题iscroll4webhtml5mobilejavascriptweb移动平台前端UI开发工作，兼容问题超多，今儿又遇到一个。产品方要求在某固定尺寸容器内显示内容，但内容条数未知；如果条数过多，容器显示滚动条。这鸟需求...

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

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

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

weixin_30731287的博客

06-28

397

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

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

weixin_30388677的博客

10-20

113

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

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

qq_30068989的博客

02-22

719

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

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

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

11-02

1168

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

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

08-03

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

详解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 会将页面内容放在一个滚动层中，而滚动层的滚动速度比页面的滚动速度慢，导致滑动卡顿。为了解决这个问题，可以...

iphone手机overflow-y: iscroll 滑动卡

y花落无痕y

11-07

1338

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

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

qq_45043019的博客

09-10

2646

当使用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

2365

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

ios 苹果不兼容overflow:scroll

任某某的博客

08-21

1003

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

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

weixin_42303389的博客

05-30

947

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

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

MichaelAn的博客

02-13

2520

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

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

会飞的程序猿

10-15

559

// 去除滑动条，但是低端机有兼容性问题，可以最外层加个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

3589

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

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

weixin_33851429的博客

01-09

3587

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