在做一个vue商城项目时使用better-scroll遇到了无法完全滚动的问题,这里是项目的地址。http://124.70.150.189。
现象:用PC端的chrome调试时并没有任何问题,但用自己的手机时发现,首页点击一个商品,进入商品详情页后往下滚到底部时,底部最后两张图片的内容显示不全,有部分被遮挡。
问题如下图所示:
问题分析:
我们都知道better-scroll的wrapper要有确定高度插件才能正常工作,我的wrapper当时在CSS中给定的宽度是:
height: calc(100% - 102px)
因为我给了wrapper的父元素的高度是100vh,因此wrapper的高度是100vh - 102px,问题就出在这个vh的单位上。
核心问题是移动浏览器(Chrome Safari QQ浏览器等