Open justjavac opened 7 years ago
根据MDN文档,
Element.scrollIntoView
是一个实验性质的方法,提示截图如下:
Element.scrollIntoViewIfNeeded
是一个非标准的特性,建议不要在生产环境中使用,提示截图如下:
其实这两个特性,我个人感觉应用最多的场景应该是在移动端,当表单元素获得焦点的时候滚动到视野中,避免软键盘遮挡元素。鉴于Element.scrollIntoView
无论设置什么参数,且不论是否在视野中都会滚动的特点,Element.scrollIntoViewIfNeeded
特性应该比Element.scrollIntoView
体验好。
虽然MDN文档中说Element.scrollIntoViewIfNeeded
是非标准特性,但是在移动端的支持还是非常好的,以下截图来自caniuse:
但是反观Element.scrollIntoView
这个实验特性,在移动端的支持并不是特别好,以下截图来自caniuse:
根据上面的比较应该可以得出结论:在移动避免软键盘遮挡表单元素时,应该使用Element.scrollIntoViewIfNeeded
特性来实现元素滚动到视野中,不论是体验还是浏览器支持,该特性都好于Element.scrollIntoView
特性。
以上。
如有错误,敬请指正。
@Tao-Quixote 是的,这个主要是用在移动端,而且推荐使用 scrollIntoViewIfNeeded
inline 参数是做什么用的,各个参数值试了一遍,没发现有什么区别
@Yangfan2016 作用于横向滚动条的
@Yangfan2016 作用于横向滚动条的
soga thx ~
MDN 文档:
Element.scrollIntoView()
方法让当前的元素滚动到浏览器窗口的可视区域内。而Element.scrollIntoViewIfNeeded()
是Element.scrollIntoView()
的变体,如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动。Element.scrollIntoView()
,无论设置什么参数,均发生滚动。Element.scrollIntoViewIfNeeded()
,无论设置什么参数,均不发生滚动。