vue锚点使用
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”。
behavior这个选项决定页面是如何滚动的,实测auto与instant都是瞬间跳到相应的位置,而smooth就是有动画的过程。
block 可选
“start”, “center”, “end”, 或 "nearest"之一。默认为 “center”。
inline 可选
“start”, “center”, “end”, 或 "nearest"之一。默认为 “nearest”。
使用介绍
看起来文邹邹,没关系,下面就简单明了的说明一下各种参数使用:
-
页面一定要能滚动,这个方法才会生效,否则,你让我如何给你滚动呢?
-
然后就看代码吧:
//这个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)
-
看了上面的代码,基本的用法就已经完全了解了,至于其他参数值,我没有试过,不过好像也用不上,需要的就是滚动效果,并且有些浏览器也不支持,所以就不研究了,这里还要说明的是,元素是否滚动到底部或顶部,还受制于页面布局的限制,如果页面已经到头,那相应元素也可能就停在半中腰的位置了;
-
说完了使用,最后就是兼容性了。前面已经提到了,这个方法没有入标准,但是大多数主流浏览器已经支持其基本功能,也就是说,使用true,false两个参数,来实现木讷的定位(没有滚动动画)是没有任何问题的,但是加入options参数时,就不得不说一句,IE各种版本会直接忽略,全部看成true参数属性,如果想看到滚动动画,就只有火狐和chrome。
最后附上我用uniapp写的锚点例子
<!-- 横向选择列表 -->
<div class="select-mock">
<span
class="select-item"
:class="selextIndex == item.id ? 'current' : ''"
v-for="(item, index) in selectList"
:key="index"
@click="selectItem('#anchor-' + item.id, item.id)"
>{{item.name}}
</span>
</div>
<!-- 产品概况 -->
<div class="prodct-mock" id="anchor-0"></div>
<!-- 成功案例 -->
<div class="success-case" id="anchor-1"></div>
<!-- 应用场景 -->
<div class="application-scenario" id="anchor-2"></div>
<!-- 产品优势 -->
<div class="produc-advantages" id="anchor-3"></div>
<!-- 功能介绍 -->
<div class="function-introduction" id="anchor-4"></div>
<!-- 合作伙伴 -->
<div class="cooperative-partner" id="anchor-5"></div>
<script>
export default {
data() {
return {
selextIndex: 0,
selectList: [
{
id: 0,
name: "产品概况"
},
{
id: 1,
name: "成功案例"
},
{
id: 2,
name: "应用场景"
},
{
id: 3,
name: "产品优势"
},
{
id: 4,
name: "功能介绍"
},
{
id: 5,
name: "合作伙伴"
}
],
}
},
methods: {
// 选择楼层锚点
selectItem(selector, index) {
this.selextIndex = index;
this.$el.querySelector(selector).scrollIntoView()
},
}
}
</script>
效果
参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView