Vue项目中实现描点跳转scrollIntoView的案例
作者:JackieDYH
这篇文章主要介绍了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', }) // 回到顶部 },
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。