美文网首页
移动端适配屏幕滚动贴合问题

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

作者: 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,要不就是外层不要滚,里面的部分元素滚动

相关文章

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

    下面是css代码 当你监听app的变化去触发各种操作的时候完全可以,但是ios上面自带的弹簧效果就会导致类似双滚的...

  • 微信小游戏屏幕适配

    作者: 何永峰;标签: 屏幕适配 屏幕适配 适配都是老生常谈,移动端要根据手机屏幕适配,PC端也有时候根据不同的...

  • LayaAir屏幕适配

    LayaAir屏幕适配 官方教程链接:LayaAir实战开发11-屏幕适配 屏幕适配 随着移动端设备(手机、平板、...

  • 盘点移动端适配方案

    盘点移动端适配方案 作为开发者,在手机移动端做适配的时候会出现很多问题:最不希望用户看到的就是横向滚动条。其次是文...

  • vue 使用lib-flexible、px2rem-loader

    使用vue开发移动端 开发移动端就必须的考虑各种手机屏幕的兼容适配问题了,这里使用lib-flexible、px2...

  • 移动端屏幕适配

    首先了解一下rem是什么?它的全称是 font size of the root element (根元素的字体大...

  • 移动端屏幕适配

  • 移动端屏幕适配

    1、什么是rem rem(font size of the root element)是指相对于根元素( )的字体...

  • 2-移动端适配问题

    解决网页在移动端的适配问题,一般的思路是通过查询设备的屏幕大小,自动对元素进行等比缩放,如果是PC端的适配问题就是...

  • 移动H5页面开发多屏适配 - viewport和像素篇

    最近刚刚接触移动端的页面开发,遇到的第一个问题就是搞清楚多屏适配的方案。要知道多屏适配的原理就要知道移动端各种屏幕...

网友评论

      本文标题:移动端适配屏幕滚动贴合问题

      本文链接:https://www.haomeiwen.com/subject/qnqrektx.html