vant 输入框ios设备失焦自动滚动到顶部

之前使用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也不会出现上述情况。

说不出来问题的根本原因。。。革命尚未成功,菜鸡仍需努力呀

  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值