因为工作中用到了锚点设置,常用的总是出问题,后来扒拉出了这个属性,详细研究了下方便日后使用
介绍scrollIntoView()的详细属性 简介该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。
PS:根据其他元素的布局,元素可能无法完全滚动到顶部或底部。
TIPS:页面(容器)可滚动时才有用!
语法 element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); //布尔参数 element.scrollIntoView(scrollIntoViewOptions); //对象参数 语法参数?
?
示例 var element = document.getElementById("box"); element.scrollIntoView(); element.scrollIntoView(false); element.scrollIntoView({block: "end"}); element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});?
应用场景URL中hash标记的进化
?
聊天窗口滚动显示最新的消息
往一个列表添加item后滚动显示最新的添加的item
回到顶部(#)
滚动到指定位置(#xxx)
浏览器兼容性?
?
注意:不支持"smooth"行为或"center"选项。
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签: #scrollintoview