h5在ios下overflow:auto,滑动没有惯性解决方案

最新推荐文章于 2025-05-21 20:46:41 发布

原创最新推荐文章于 2025-05-21 20:46:41 发布 · 6.2k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了在iOS设备上实现滑动惯性效果的方法。仅当body的overflow属性设置为auto时，默认支持惯性滚动。对于其他元素，则需要通过-webkit-overflow-scrolling:touch来启用这一特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在ios 下,只有body的overflow:auto有滑动惯性效果,

其他地方需要添加

-webkit-overflow-scrolling : touch;

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

梦幻般的菜鸟

关注关注

1
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

ios上滚动条不能滑动滚动卡住的问题

江拥羡橙的博客

12-02

1081

3.滑动容器的所有父元素添加样式（只给要滚动父容器添加即可）iosapp上viewweb h5不能滑动的问题。1.给滑动容器添加样式。

js解决overflow：scroll失效问题

weixin_34128534的博客

07-03

1万+

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

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

前端-解决IOS断页面在自定义滚动条中滑动无惯性的问题

weixin_41395648的博客

11-21

1048

div{ -webkit-overflow-scrolling: touch } 加上此css属性即可

【前端基础】12、CSS的overflow（visible、hidden、scroll、auto）【注：只有最基础的说明。】

最新发布

陌上人如玉，公子世无双。

05-21

477

用于控制内容溢出时的行为。：超出的部分正常显示（默认设定）：超出的部分隐藏显示（直接裁剪掉）：超出的部分滚动显示滚动条占用高度（weight）、宽度（height）注意：如果高度超过文本的实际高度了，让然会有滚动条。：超出的部分自动调整显示（自动决定是否使用滚动机制。）如果文本高度小于设定的高度：文本自动根据情况显示。如果文本高度大于设定高度：自动显示滚动条。

【解决方案】H5 页面滚动穿透 overflow:hidden 失效

优快云前端知识共享

08-17

2074

在h5页面上，如果想要让页面禁止滚动。一般通过给 body 元素 overflow:hidden;进行设置。但是，在部分安卓机上，上述操作并不会生效。因此，我们通过 fixed 布局来解决这个问题。当我们想要禁止页面滚动时，设置下面的属性，即可生效: // 设置 fixed 布局 document.body.style.position = 'fixed'; document.body.style.height = '100%'; document.body.style.width = '100%.

解决 IOS 系统下app内嵌H5页面没有滚动惯性

一捆铁树枝的博客

04-10

2195

APP内嵌H5页面开发中，有遇到很多坑，大部分问题还是安卓和IOS 之间的兼容性问题，下面介绍一下遇到的一个很典型问题；问题：H5页面在IOS系统下APP中滚动时没有惯性特征：长页面在划动时，手指离开屏幕页面就停止，不会有缓冲效果；解决办法：在H5页面的滚动容器上添加如下CSS代码即可解决： { height: 100%; overflow-y: scroll;...

详解iOS中position:fixed吸底时的滑动出现抖动的解决方案

08-26

iOS 中 position:fixed 吸底时的滑动出现抖动的解决方案可以通过解决 native 和 h5 两个原因引起的抖动来实现。开发者可以根据具体情况选择合适的解决方案，以便解决抖动问题。知识点： 1. position:fixed 在 iOS...

iOS中position:fixed吸底时的滑动出现抖动的解决方案

pretty sunshine

06-29

1万+

两种抖动为什么抖动还会有两种？其实是我碰到过两种抖动的场景，第一个场景是native的抖动，第二个场景是h5的抖动。 native的抖动前端开发人员会在app中打开webview，这个时候iOS中position:fixed吸底时的滑动出现抖动应该是native造成的抖动，整个viewport跟着动，所以可以在生成schema的时候将参数bounce_disable（可能不一定都...

bootsrtap h5 移动版页面在苹果手机ios滑动上下拉动滚动卡顿问题解决方法

weixin_34370347的博客

03-30

2533

bootsrtap h5 移动版页面在苹果手机ios滑动上下拉动滚动卡顿问题解决方法 bootsrtap框架做的h5页面，在android手机下没有卡顿问题，在苹果手机就一直存在这问题，开始毫无头绪，经过多次测试，更换版本，查找bootsrtap官方案例网站最终确定不是 bootsrtap框架本身的问题，然后排除网页结果问题，布局问题，js问题，样式问题，内容长度问题，所以当时想到的地方都改...

滚动穿透及IOS惯性滚动究极解决方案

qq_36545095的博客

04-01

1256

滚动穿透及IOS惯性滚动究极解决方案

h5苹果ios系统中overflow: auto滑动不流畅

dnpao的专栏

08-02

8003

方案一：在滚动容器内加-webkit-overflow-scrolling: touch 但这个方案有一个问题，在页面内具有多个overflow：auto的情况下，那些具有绝对定位（absolute, fixed）属性的元素，也会跟着滚动。方案二： body {overflow-x: hidden} 即，给 body 元素添加overflow-x：

css解决h5在ios上滑动卡顿的问题

qq_41422946的博客

12-21

2764

以前看到的解决方案是用iscroll.js来解决，后面看到一个别人分享的文章，自己也记录一下： -webkit-overflow-scrolling: touch; 这行代码启用了硬件加速特性，所以滑动更加流畅。更深层的原因可以看上面的链接在，文章有介绍。但是有一个限制条件，就是安卓4.0以上，ios要5.0以上才支持（webkit108400版本左右）...

关于移动端h5页面不能滑动问题的解决办法

热门推荐

qq_36167454的博客

12-02

6万+

页面不能滑动无非就是css和js两个方面的问题有的人说如果我写很多个p标签不写任何样式看能不能滑动，如果能滑动说明是样式的原因，要是也不能滑动那就应该是js的原因，是有一定的道理的，但是先别忘了看一下你的html或body是不是加了height：100%；overflow：hidden； 1.下面分先说css的问题，主要排查overflow：hidden；检查也有一定

前端如何实现音乐盒胶盘的转动_前端如何实现惯性滚动动效

weixin_39702479的博客

11-23

304

我们在平时编程开发时，除了需要关注技术实现、算法、代码效率等因素之外，更要把所学到的学科知识(如物理学、理论数学等等)灵活应用，毕竟理论和实践相辅相成、密不可分，这无论是对于我们的方案选型、还是技术实践理解都有非常大的帮助。今天就让我们一起来回顾中学物理知识，并灵活运用到惯性滚动的动效实现当中。惯性滚动(也叫滚动回弹，momentum-based scrolling)最早是出现在 iO...

移动端滑动时页面惯性滑动overflow-scrolling: touch

banxia2152的博客

10-25

827

-webkit-overflow-scrolling:auto | touch; auto：普通滚动，当手指从触摸屏上移开，滚动立即停止touch：滚动回弹效果，当手指从触摸屏上移开，内容会保持一段时间的滚动效果，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。兼容写法： over-flow: auto; /* winphone8和and...

iOS下H5倒计时保持运行的解决方案

为了解决iOS下H5锁屏或进入后台时倒计时停止的问题，开发者需要寻找替代方案。以下是一些可能的解决方案： 1. **使用Web Workers**: Web Workers可以创建后台线程来运行JavaScript代码，理论上不会因为页面变为非...