之前使用van-filed组件都是在屏幕高度内使用,没有涉及到van-field所在位置超出屏幕高度有滚动条的情况
遇到的问题:van-field组件失焦后会自动滚动到屏幕顶部(ios设备上出现,安卓上未遇到)。
尝试过程:网上查询感觉遇到这个问题的不是很多。看到一个说vant源码中设置了ios设备滚动事件啥的。最开始想在blur事件中阻止冒泡事件或者阻止默认行为都不管用;后来想用原生的input标签这个问题还是存在;最后在项目交付之前用的是在focus事件里获取保存当前元素距离顶部高度,blur里面用定时器200ms后滚动回之前保存的高度,其实用户感受很不好,能明显看到屏幕滚动;
好用的办法:1.在移动端用el-dialog设置lock-scroll,里面再嵌套需要的vant组件,失焦后不会出现上述情况;2.有时间看了一下el-dialog的相关样式,尝试了一下在外层body(我在自己项目中用的是#app)设置overflow:hidden;里面的div用position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto也不会出现上述情况。
说不出来问题的根本原因。。。革命尚未成功,菜鸡仍需努力呀