H5页面在IOS上滚动回弹问题

2021-10-09  本文已影响0人  御坂七十一号

问题: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设置 背景色来盖住默认白色,淡化问题。

上一篇下一篇

猜你喜欢

热点阅读