H5页面在ios手机滑动卡顿问题

最新推荐文章于 2023-06-15 15:08:18 发布

辰枫Sir.

最新推荐文章于 2023-06-15 15:08:18 发布

阅读量2.9k

点赞数 1

分类专栏：移动端文章标签： ios javascript 前端

本文链接：https://blog.csdn.net/qq_43531694/article/details/127995004

版权

移动端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

业务需求场景

在我们开发中，H5页面多多少少会在外部打开，比如微信，钉钉，那么就会存在一些意想不到的bug！此次主要针对移动端H5页面在iOS端产生的橡皮回弹（橡皮筋效果）造成滑动卡顿问题做一下相关记录，希望对遇到类似问题的同学有所帮助。

方案一：使用 inobounce.js

inobounce.js
在 html主页面的 header 标签中引入 inbounce.js，即。当引入此文件之后，iOS端整个页面都无法滑动或滚动，若想滚动的元素能够实现滚动效果，则需要对滚动区域设置固定的高度，即 height、max-height，同时也要设置 overflow: auto，实现页面滑动。为防止iOS端页面滚动发生卡顿现象，需要对滚动区域设置 -webkit-overflow-scrolling: touch 属性。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>inobounce</title>
		<script src="inobounce.js"></script>
		<style>
			ul {
				height: 115px;
				border: 1px solid gray;
				overflow: auto;
				-webkit-overflow-scrolling: touch;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>List Item 1</li>
			<li>List Item 2</li>
			<li>List Item 3</li>
			<li>List Item 4</li>
			<li>List Item 5</li>
			<li>List Item 6</li>
			<li>List Item 7</li>
			<li>List Item 8</li>
			<li>List Item 9</li>
			<li>List Item 10</li>
		</ul>
	</body>
</html>

别着急，请看方案二！

方案二：CSS样式处理

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>iOS橡皮回弹</title>
	</head>
	<body>
		<!-- 内容区 -->
		<div id="app"></div>
	</body>
</html>

主要css代码：

/* 初始化 */
* {
	margin: 0;
	padding: 0;
}
/* 基本样式 */
html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
body {
	box-sizing: border-box;
	position: relative;
}
/* 超出滚动 */
#app {
	width: 100%;
	height: 100%;
	overflow-y: auto;
}

方案三：meta标签设置 + css（推荐）

在你项目index.html中设置如下：

<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="yes" name="apple-touch-fullscreen" />

<style>
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
</style>

总结

总的来说，三种方案我在实际开发中都进行了尝试。方案一在微信中浏览H5网页时可以完美解决橡皮回弹效果；当H5页面在iOS端微信授权跳转时，底部会有一个导航条，此时导航条也有可能被遮盖，点击导航条两端的按钮没有反应。在Safari浏览器打开H5页面时，网页的顶端地址栏和底部菜单栏会有一定的遮挡，体验效果不是很理想，最终此方案被pass掉了。方案二是我实际工作中使用的，回弹效果得到了一定的改善。体验效果较方案一有了很大的提升。方案三个人觉得最简单直接，我的问题是通过该方案解决的。

辰枫Sir.

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
H5页面在ios手机滑动卡顿问题

在我们开发中，H5页面多多少少会在外部打开，比如微信，钉钉，那么就会存在一些意想不到的bug！此次主要针对移动端H5页面在iOS端产生的橡皮回弹（橡皮筋效果）造成滑动卡顿问题做一下相关记录，希望对遇到类似问题的同学有所帮助。
复制链接

扫一扫

专栏目录