问题:h5页面在IOS浏览器上,当滚动到顶部后,手指抬起,滚动结束,再次下拉;或者,当滚动到底部,手指抬起,滚动结束,再次上拉。然后手指不松开就直接往相反方向拉会导致页面整体被拉动,触发苹果的回弹效果。
解决:实际上滚动的是body内的直接子div,这个div高度不能设置100%,必须让他超过滚动高度,描述应该不准确,但可以解决问题。
eg. base内容超过100%。此时会触发回弹滚动,导致页面被截断。
body {
font-family: PingFang SC;
}
.base {
background-color: #d47114;
height: 100%;
}
eg. base内容超过100%。此时向相反方向拉会滚动内容,内容不会被截断。
body {
font-family: PingFang SC;
}
.base {
background-color: #d47114;
height: 300%;//或者auto不设置高度
}
但这样,只能解决屏幕内容被截断问题,依然会拉伸,但是可以给body设置 背景色来盖住默认白色,淡化问题。
网友评论