移动端适配屏幕滚动贴合问题
2020-09-07 本文已影响0人
guoss
<!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,要不就是外层不要滚，里面的部分元素滚动
