在vue商城项目中使用better-scroll遇到滚动到底部时内容显示不全的问题，问题根源在于使用了100vh单位。移动浏览器的地址栏隐藏/显示导致视口高度变化，使得100vh并未准确反映屏幕可视区域。解决方案是通过JavaScript获取屏幕可视高度并动态设置父元素高度，确保内容完全显示。
在做一个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浏览器等）具有“帮助”功能，其中地址栏有时可见，有时隐藏，从而改变了视口的可见大小。 这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为浏览器的高度，并隐藏了地址栏。 结果是，当地址
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
