justjavac / the-front-end-knowledge-you-may-not-know

:innocent: 你可能不知道的前端知识点
https://git.io/fjrsr
2.28k stars 118 forks source link

scrollIntoViewIfNeeded 与 scrollIntoView #3

Open justjavac opened 7 years ago

justjavac commented 7 years ago

MDN 文档:

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

Tao-Quixote commented 7 years ago

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

image

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

image

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

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

image

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

image

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

以上。

如有错误,敬请指正。

justjavac commented 7 years ago

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

Yangfan2016 commented 6 years ago

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

troy351 commented 5 years ago

@Yangfan2016 image 作用于横向滚动条的

Yangfan2016 commented 3 years ago

@Yangfan2016 image 作用于横向滚动条的

soga thx ~