安卓点击两次?scrollIntoView兼容问题

2019-06-11  本文已影响0人  野马关

今天遇到一个棘手问题

一个表格,为了不遮挡键盘,当focus时,要把它Element.scrollIntoView,这个功能在ios没有任何问题,但是在安卓,却出现了诡异的问题,点击上面的input框时,会聚焦下面的input框。经过测试,focus确实发生了两次,在不同的input。

经过思考,这应该算是一种点击穿透,点击开始,导致视图移动,移动过后(scrollIntoView后),这个点击仍会生效。ios应该是像PC端一样,在点击发生后,不再继续触发该事件(包括click和touchstart),而安卓则没有这以拦截。

解决方案

给scrollIntoView一个参数,scrollIntoView({behavior: 'smooth'}),这会让滚动产生一个动画,可能有延时,就不会造成二次点击,理想情况要加上另一个参数,scrollIntoView({behavior: 'smooth', block: 'start'}),这样,不然滚动的位置就不会是顶端,一个参数影响了另一个参数的默认值,不得不说这有点奇幻。

另外,ios不兼容scrollIntoView传参,传了不会有效果,也不会报错

如果你有其他的想法,欢迎留言讨论

上一篇 下一篇

猜你喜欢

热点阅读