苹果手机内嵌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>

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

然而默认情况下,全局也是自带回弹效果的(这里全局指的是htmlbody),手指在屏幕上随意滑动时,就会有下面这种效果:

向下滑动
苹果手机内嵌h5如何禁止全局弹性效果_第1张图片
向上滑动
苹果手机内嵌h5如何禁止全局弹性效果_第2张图片
注意绿色和蓝色上面和下面的白色区域。

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

例如把上面的这段代码:

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

改成

 html,
 body {
   width: 100%;
   height: 100%;
   overflow-x: hidden;
}

交互就正常显示了。

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

或者可以使用三方库iNoBounce,具体使用方式可以自己去官网看一下,很简单

你可能感兴趣的:(ios兼容,web开发遇到的问题,前端,ios,css,javascript)