scrollIntoViewIfNeeded 与 scrollIntoView

[justjavac]

MDN 文档：

• https://developer.mozilla.org/zh_CN/docs/Web/API/Element/scrollIntoViewIfNeeded
• https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。而 Element.scrollIntoViewIfNeeded() 是 Element.scrollIntoView() 的变体，如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。

• 当元素已经在可视区域时，调用 Element.scrollIntoView()，无论设置什么参数，均发生滚动。
• 当元素已经在可视区域时，调用 Element.scrollIntoViewIfNeeded()，无论设置什么参数，均不发生滚动。

[Tao-Quixote]

根据MDN文档，
Element.scrollIntoView是一个实验性质的方法，提示截图如下：

Element.scrollIntoViewIfNeeded是一个非标准的特性，建议不要在生产环境中使用，提示截图如下：

其实这两个特性，我个人感觉应用最多的场景应该是在移动端，当表单元素获得焦点的时候滚动到视野中，避免软键盘遮挡元素。鉴于Element.scrollIntoView无论设置什么参数，且不论是否在视野中都会滚动的特点，Element.scrollIntoViewIfNeeded特性应该比Element.scrollIntoView体验好。

虽然MDN文档中说Element.scrollIntoViewIfNeeded是非标准特性，但是在移动端的支持还是非常好的，以下截图来自caniuse:

但是反观Element.scrollIntoView这个实验特性，在移动端的支持并不是特别好，以下截图来自caniuse:

根据上面的比较应该可以得出结论：在移动避免软键盘遮挡表单元素时，应该使用Element.scrollIntoViewIfNeeded特性来实现元素滚动到视野中，不论是体验还是浏览器支持，该特性都好于Element.scrollIntoView特性。

以上。

如有错误，敬请指正。

[justjavac]

@Tao-Quixote 是的，这个主要是用在移动端，而且推荐使用 scrollIntoViewIfNeeded

[Yangfan2016]

inline 参数是做什么用的，各个参数值试了一遍，没发现有什么区别

[troy351]

@Yangfan2016

作用于横向滚动条的

[Yangfan2016]

@Yangfan2016 作用于横向滚动条的

soga thx ~