移动端适配屏幕滚动贴合问题

作者: guoss | 来源:发表于2020-09-07 21:50 被阅读0次

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="app"></div>
</body>
</html>

下面是css代码

html,body {
  width: 100%;
  height: 100%;
}
.app {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

当你监听app的变化去触发各种操作的时候完全可以，但是ios上面自带的弹簧效果就会导致类似双滚的效果，导致页面不能滑动。
正确的方法是

.app {
  width: 100%;
  height: 100%;
}
// 或者是你有内容需要滚动，内容区域撑开，监听的元素依旧是window对象才可以
.app {
  .child {
    position: relative;
    top: 0;
    left:0;
    bottom: 0;
  }
}

总之一句话，你的滚动父节点要么是window,要不就是外层不要滚，里面的部分元素滚动