苹果手机内嵌h5如何禁止全局弹性效果

简单模拟一个场景，这是一个商城的商品分类页面，是一个左右布局，左面是所有的分类，右面是展示这个分类的商品，这里为了简单就只写一个demo了。

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    .box {
      width: 100%;
      height: 100%;
      display: flex;
      overflow: auto;
      background-color: red;
    }

    .left {
      width: 100px;
      height: 100%;
      background-color: green;
      overflow: auto;
    }

    .right {
      flex: 1;
      height: 100%;
      background-color: blue;
      overflow: auto;
    }

    p {
      height: 150px;
    }

    ::-webkit-scrollbar {
      display: none;
    }
  style>
head>

<body>

  <div class="box">
    <div class="left">
      <p>leftp>
      <p>leftp>
      <p>leftp>
      <p>leftp>
      <p>leftp>
      <p>leftp>
      <p>leftp>
    div>
    <div class="right">
      <p>rightp>
      <p>rightp>
      <p>rightp>
      <p>rightp>
      <p>rightp>
      <p>rightp>
      <p>rightp>
      <p>rightp>
      <p>rightp>
    div>
  div>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

如果在苹果手机上，默认情况下，某块区域设置overflow: auto之后，这块区域都会有回弹效果，这个是苹果手机自带的。所以，这个时候.left和.right区域上下滑动会有回弹效果。

然而默认情况下，全局也是自带回弹效果的（这里全局指的是html和body），手指在屏幕上随意滑动时，就会有下面这种效果：

向下滑动

向上滑动

注意绿色和蓝色上面和下面的白色区域。

即使有时在left和right区域滑动时，也会触发全局的弹性效果。这个时候很容易造成意想不到的交互问题，这个时候我们需要禁用掉全局的弹性效果，可以在html或者body上设置overflow-x: hidden就可以了

例如把上面的这段代码：

 html,
 body {
   width: 100%;
   height: 100%;
}
1
2
3
4
5

改成

 html,
 body {
   width: 100%;
   height: 100%;
   overflow-x: hidden;
}
1
2
3
4
5
6

交互就正常显示了。

需要注意的是既然全局已经设置成了overflow-x: hidden，那么如果子组件高度，超过了html和body的高度，那你子组件就需要设置overflow: auto了，不然就滑不动了

相关阅读:
java毕业生设计成绩分析系统计算机源码+系统+mysql+调试部署+lw
Linux 中 .tar 和 tar.gz 的区别
【Python学习】--跳过pip安装错误继续执行
算法与数据结构-堆
2023最新SSM计算机毕业设计选题大全（附源码+LW）之java家教服务平台y467g
sqoop1.4.7完全支持Hadoop3.x, Hive3.x Hbase2.x
Swagger简单使用
蓝桥杯动态规划每日一题
ACCESS_MASK不明确的符号
【二进制部署k8s-1.29.4】五、kube-controller-manager安装配置

原文地址：https://blog.csdn.net/weixin_45609589/article/details/134513549