scrollIntoView()实现简单的锚点定位

综述
锚点定位是一个再熟悉不过的操作了,通常会用a标签href=#XX去实现,不过这样做,有一个问题,就是页面会有刷新感,而且地址栏会有变化,F5刷新,则#XXX还是显示在地址栏里,这样如果要进一步进行有关地址栏url的操作,就不得不再做些判断,所以寻找一些新的方法。

如果要求不是很高,scrollIntoView()这个方法就可以取代传统锚点定位,它是利用滚动原理,来将相应的元素滚动到可是区域内。接下来看看详细的介绍。

首先需要说明的是,这个方法并没有写入标准,但是大多数主流浏览器已经支持或部分支持其功能了,所以可以放心使用,当然如果有朝一日标准出来了,那就按标准来吧。

其次要说明的是,这是js原生方法,jquery等框架是使用不了的,所以,获得元素的方法一定是document.getElementById或querySelector,然后才可以点出来scrollIntoView()方法。

官方参数

参数介绍:直接上官方说法(https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

element.scrollIntoView(); // 等同于element.scrollIntoView(true) 
element.scrollIntoView(alignToTop); // Boolean型参数 
element.scrollIntoView(scrollIntoViewOptions); // Object型参数

 --如果为true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。
    --如果为false,元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。


scrollIntoViewOptions 可选 

一个带有选项的object:

{
    behavior: "auto"  | "instant" | "smooth",
    block:    "start" | "end",
}

behavior 可选

定义缓动动画, "auto", "instant", 或 "smooth" 之一。默认为 "auto"。

block 可选

"start", "center", "end", 或 "nearest"之一。默认为 "center"。

inline 可选

"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。

使用介绍

看起来文邹邹,没关系,下面就简单明了的说明一下各种参数使用:

1.  页面一定要能滚动,这个方法才会生效,否则,你让我如何给你滚动呢?

2.  然后就看代码吧: 

//这个title-part元素将以平滑的滚动方式滚动到与视口底部齐平地方(有兼容性问题)
document.querySelector("#title-part").scrollIntoView({
    block: 'end',
    behavior: 'smooth' 
})
 
//这个article-part元素将以平滑的滚动方式滚动到与视口顶部齐平地方(有兼容性问题)
document.querySelector("#article-part").scrollIntoView({
    block: 'start',
    behavior: 'smooth'
})
 
//这个articleMU-part元素将木讷的瞬间滚动到与视口顶部齐平地方(无滚动动画效果)
document.querySelector("#articleMU-part").scrollIntoView();//默认值就是true,可以不写
 
//这个titleMU-part元素将木讷的瞬间滚动到与视口底部齐平地方(无滚动动画效果)
document.querySelector("#titleMU-part").scrollIntoView(false)

3.  看了上面的代码,基本的用法就已经完全了解了,至于其他参数值,我没有试过,不过好像也用不上,需要的就是滚动效果,并且有些浏览器也不支持,所以就不研究了,这里还要说明的是,元素是否滚动到底部或顶部,还受制于页面布局的限制,如果页面已经到头,那相应元素也可能就停在半中腰的位置了;

4. 说完了使用,最后就是兼容性了。前面已经提到了,这个方法没有入标准,但是大多数主流浏览器已经支持其基本功能,也就是说,使用true,false两个参数,来实现木讷的定位(没有滚动动画)是没有任何问题的,但是加入options参数时,就不得不说一句,IE各种版本会直接忽略,全部看成true参数属性,如果想看到滚动动画,就只有火狐和chrome。最后附上官方的浏览器兼容性图表,结束文章,欢迎大家指正!不胜感激!

浏览器兼容性
特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基础支持 29 1.0 (1.7 or earlier) 8[1] 38 5.0[1]
scrollIntoViewOptions 61[2] 36 (36)[3][4] 未实现 48[2] 未实现
特性 Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基础支持 (Yes) 1.0 (1.0) 未实现 ? ?
scrollIntoViewOptions 61[2] 36.0 (36) 未实现 未实现 48
 

[1] 不支持 "smooth" 属性 和 "center" 设置项.

[2] 设置项 "block" 及 "inline" 支持的值有:"start", "center", "end", "nearest".

[3] 不支持 "inline" 设置项。

[4] 不支持"block" 设置项的值 "nearest" 或 "center"

上一篇:Java Map按值排序的正确姿势


下一篇:页面锚点跳转的几种方式