美文网首页
H5页面在IOS上滚动回弹问题

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

作者: 御坂七十一号 | 来源:发表于2021-10-09 16:45 被阅读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设置 背景色来盖住默认白色,淡化问题。

    相关文章

      网友评论

          本文标题:H5页面在IOS上滚动回弹问题

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