H5页面在 ios 端滑动不流畅的问题

最新推荐文章于 2024-11-08 15:00:09 发布

转载最新推荐文章于 2024-11-08 15:00:09 发布 · 429 阅读

本文介绍如何在网页中复现iOS系统惯性滑动的流畅体验，提供了两种解决方案：一是使用-webkit-overflow-scrolling:touch，但可能影响绝对定位元素；二是通过设置body的overflow-x为hidden，再对滚动容器应用overflow-y:auto。

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

IOS系统的惯性滑动效果非常6，但是当我们对div加overflow-y:auto;后是不会出这个效果的，滑动的时候会感觉很生涩。怎么办？

方案一：
在滚动容器内加-webkit-overflow-scrolling: touch

但这个方案有一个问题，在页面内具有多个overflow：auto的情况下，那些具有绝对定位（absolute, fixed）属性的元素，也会跟着滚动。

方案二：

body {overflow-x: hidden}

即，给 body 元素添加overflow-x：hidden。然后在滚动容器内加overflow-y: auto

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

飞飞飞~元宝

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【案例篇1】移动端H5网页在ios滑动不流畅和禁止缩放问题

风中追风

02-13

1788

最近开发小程序，有一个富文本展示页面使用的是H5网页嵌入的，当你用 overflow-y:scroll属性的时候，内容超出容器溢出滚动的效果很迟顿，特别是在IOS系统中，而且页面还会缩放。修改meta标签即可控制页面缩放及是否缩放 touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比；

web解决ios滑动不流畅

小强的博客

05-21

854

-webkit-overflow-scrolling: touch;/* 解决ios滑动不流畅问题 */

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

h5在iOS上滑动卡顿问题

baidu_40537062的博客

09-24

554

在css文件的html标签中加上 -webkit-overflow-scrolling: touch; 如： html{ position: absolute; top:0; left: 0; width: 100%; height: 100%; -webkit-overflow-scrolling: touch; } ...

ios内嵌H5滑动不流畅、白屏解决方案

前端劝退师的博客

01-12

2927

最外层div加上 -webkit-overflow-scrolling属性，解决ios滑动不流畅...

【h5】ios下网页滚动不流畅

xilejie的博客

06-15

575

加在最外层的容器里， vue项目中的app 或者html、body中使用。

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

08-03

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

微信小程序在ios下Echarts图表不能滑动的问题解决

12-10

总结来说，微信小程序在iOS下Echarts图表不能滑动的问题是由于原生组件（如`canvas`）的层级限制。通过将Echarts图表转换为图片可以有效解决这个问题。当然，对于更复杂的交互需求，可能需要寻找其他解决方案，例如...

h5页面ios，双击向上滑动，拖拽到底部还能继续拖拽

01-03

在ios下，双击屏幕某些地方，滚动条会自动向上走一段。当用微信看h5的时候，拖拽到底部，会漏出来，微信自带下面的灰黑色皮肤。用js解决一下吧，这俩问题很类似，总结到一起了。 ———-特别注意，安卓没有发生过...

html页面滑动不流畅,解决页面使用overflow:scroll在移动端iOS系统上滑动出现卡顿的问题...

weixin_35975406的博客

06-03

1756

对某个div或模块使用了overflow:scroll属性，在iOS系统的手机上浏览时，则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。通过一个早上的爬虫搜索和与前端开发高手的技术探讨得知以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling:touch;据说是因为这行代码启用了硬件加速特性，所以滑动很流畅。但是这个属性也会相对耗费更多内存。在...

app内嵌h5页面在ios手机端滑动卡顿的解决方法

weixin_34026484的博客

06-24

1767

1、带滚动条的dom需加样式 -webkit-overflow-scrolling: touch;2、去掉 width:100%; height:100% 转载于:https://www.cnblogs.com/1rookie/p/11079302.html

ios H5页面滚动适配问题

CZDBGSY的博客

08-30

677

1.取消页面整体回弹效果；问题：滑动时候会卡主不动，短暂静止后或者点击屏幕后可以继续滑动。但并未解决我的问题，我的是框架页面嵌套过多，导致的多层滚动嵌套。可以使用document.body动态开关。给body标签加上fixed就好。将展示的页面的所有父元素溢出隐藏。

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

dnpao的专栏

08-02

8004

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

H5移动端页面禁止页面滑动

qq_35520046的博客

09-02

688

H5移动端页面禁止页面上下左右滑动。

h5页面内嵌到app,解决ios无法使用左右侧滑返回上一页

weixin_67898309的博客

02-01

2536

vue+vant组合开发的h5页面，嵌入多个app,其中安卓手机都可实现侧滑返回上一页，而苹果端不行，app本身不展示title顶部的返回箭头

前端h5或者app小程序页面，苹果手机打开页面无法上下滑动

最新发布

m0_59866374的博客

11-08

455

解决苹果手机无法上下滑动页面，h5，小程序，app！

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

weixin_34370347的博客

03-30

2533

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

Web APIs 事件监听(绑定)

m0_68331234的博客

04-08

329

事件监听(绑定) 事件：事件是编程语言中的术语，它是用来描述程序的行为或状态的，一旦行为或状态发生改变，便立即调用一个函数。例如：用户使用【鼠标点击】网页中的一个按钮、用户使用【鼠标拖拽】网页中的一张图片事件监听：结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。语法：元素对象.addEventListener(‘事件类型’，要执行的函数) 事件监听三要素: 事件源: 那个dom元素被事件触发了，要获取dom元素事件类型:用什么方

H5滑动页面插件：打造流畅动态网站体验

H5滑动页面插件是一种用于移动设备或桌面浏览器上提供流畅滑动效果的网页技术。这种插件能够使得网页在不同页面或内容板块之间进行无缝的切换，从而为用户提供更加直观、便捷的浏览体验。目前，H5滑动页面插件常被...