使用css scrollIntoView()方法实现滚动到页面指定的位置

介绍scrollIntoView()的详细属性

简介

scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。


PS:根据其他元素的布局,元素可能无法完全滚动到顶部或底部。

TIPS:页面(容器)可滚动时才有用!

语法

element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); //布尔参数
element.scrollIntoView(scrollIntoViewOptions); //对象参数

语法参数

 

alignToTop[可选],目前之前这个参数得到了良好的支持
true元素的顶部将对齐到可滚动祖先的可见区域的顶部。对应于scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是默认值
false元素的底部将与可滚动祖先的可见区域的底部对齐。对应于scrollIntoViewOptions: {block: "end", inline: "nearest"}
scrollIntoViewOptions[可选],目前这个参数浏览器对它的支持并不好,可以查看下文兼容性详情
behavior[可选]定义过渡动画。"auto","instant""smooth"。默认为"auto"
block[可选] "start""center""end""nearest"。默认为"center"
inline[可选] "start""center""end""nearest"。默认为"nearest"

 

示例

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)

浏览器兼容性

 

特征ChromeFirefoxSafariEdgeIEOpera
基本支持( alignToTop )yesyesyesyesyesyes
scrollIntoViewOptionsyesyes5.1[1]12[1]9[1]48[2]

 

注意:不支持"smooth"行为或"center"选项。

————————————————
本文为转载收藏使用,原文见下方链接。
原文链接:https://blog.csdn.net/learn8more/article/details/108047794

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值