Vue项目中实现描点跳转scrollIntoView的案例

目录 Vue实现描点跳转scrollIntoView 方式一：使用a标签#id形式 方式二：scrollIntoView 使用 vue遇到scrollIntoView无效问题 官方文档写的简单

Vue实现描点跳转scrollIntoView

方式一：使用a标签#id形式

<a href="#about" rel="external nofollow" >联系我们</a>
?
<div id="about">
? ? 跳转内容
</div>

方式二：scrollIntoView

//需要让页面滑动到指定位置
//首先给元素添加id属性或其他可以获取元素的属性
//通过scrollIntoView方法实现页面跳转
document.getElementById(id).scrollIntoView({ behavior: "smooth" });
?
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数
?
//可选
alignToTop:boolean值类型
true:默认值。元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。
false:元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。
?
//可选
scrollIntoViewOptions ：
behavior ：定义动画过渡效果，值为auto或smooth。
block ：定义垂直方向的对齐，值为start/center/end/nearest。
inline ：定义水平方向的对齐，值为start/center/end/nearest。
?
//实例
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});

使用

<a @click="goButtom">联系我们</a>
?
methods: {
?? ?// 跳转到页面
?? ?goButtom() {
?? ? ?document.getElementById("about").scrollIntoView({
?? ??? ?behavior: "smooth", // 平滑过渡
?? ??? ?block: "start", // 上边框与视窗顶部平齐。默认值
?? ? ?});
?? ?},
},
?
?
------------------------------------------二------------------------------------------
?
<div id="pronbit" ref="pronbit">需要移动到的位置</div>
?
//选中id
document.getElementById(e).scrollIntoView({
?? ?behavior: "smooth", ?// 平滑过渡
?? ?block: ? ?"start" ?// 上边框与视窗顶部平齐。默认值
});
// 选中ref
this.$refs.pronbit.scrollIntoView({
?? ?behavior: "smooth", ?// 平滑过渡
?? ?block: ? ?"start" ?// 上边框与视窗顶部平齐。默认值
});
?
//要是放在mounted()里执行使用
this.$refs.pronbit.scrollIntoView();//不然只执行一次刷新了也一样
?
//禁止scrollIntoView
this.$refs.pronbit.scrollIntoView(false);

vue遇到scrollIntoView无效问题

官方文档写的简单

Element 接口的scrollIntoView()方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见。

语法：

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

首先容器滚动，然后document.geyElementById或者document.querySelector 获取指定元素，最够元素调用scrollIntoView.

参数

alignToTop可选

一个Boolean值：

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

scrollIntoViewOptions 可选

一个包含下列属性的对象：

behavior 可选

定义动画过渡效果， "auto"或 "smooth"之一。默认为"auto"。

block 可选

定义垂直方向的对齐，"start","center","end", 或 "nearest"之一。默认为 [start]。

inline 可选

定义水平方向的对齐， "start", "center","end", 或 "nearest"之一。默认为 [nearest]。 实际在vue项目中遇到，当通过点击事件调用子组件的元素滚动到可视区域时怎样都无效。 最终发现，这个方法还有一个限制：需要页面完全加载后再调用 这样，在vue中可以使用$nextTick函数，确保页面已渲染完成在去调scrollIntoView使滚动到可视区域

实现代码如下

父组件：

showDatePicker(){
? if (this.$refs.pickers) {
? ? ? ? this.$nextTick(() => {
? ? ? ? ? this.$refs.pickers.showCurrentDate()
? ? ? ? })
? ? ? }

子组件：

? showCurrentDate() {
? ? ? this.$el.querySelector('.active').scrollIntoView({
? ? ? ? block: 'start',
? ? ? }) // 回到顶部
? ? },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

查看更多关于Vue项目中实现描点跳转scrollIntoView的案例的详细内容...