关于scrollIntoView和scrollIntoViewIfNeeded

由于遇到了需要将指定元素滚动到页面中的需求。然后发现了H5有两个可以实现相应效果,但都有兼容性问题。图片如下。

  • scrollIntoView的兼容性


  • scrollIntoViewIfNeeded的兼容性



    根据需要决定使用哪个。

scrollIntoView

参数可以为boolean或者options

  • Boolean:
    • true:元素的顶端将和其所在滚动区的可视区域的顶端对齐
    • false:元素的底端将和其所在滚动区的可视区域的底端对齐
  • options:{behavior,block,inline}
    • behavior:动画过渡效果,"auto"或者"smoth",默认为"auto"
    • block:垂直方向的对齐,"start", "center", "end", 或 "nearest"之一
    • inline:水平方向的对齐,"start", "center", "end", 或 "nearest"之一

注意:
取决于其它元素的布局情况,此元素可能不会完全滚动到顶端或底端。

规范

scrollIntoViewIfNeeded

该方法pc端兼容性很差,基本排除使用的可能性。但移动端还是可以使用的。
参数:Boolean,默认为true。

  • true :则元素将在其所在滚动区的可视区域中居中对齐
  • false: 则元素将与其所在滚动区的可视区域最近的边缘对齐。 根据可见区域最靠近元素的哪个边缘,元素的顶部将与可见区域的顶部边缘对准,或者元素的底部边缘将与可见区域的底部边缘对准。
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容