vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue描点跳转scrollIntoView

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值:

scrollIntoViewOptions 可选

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

behavior 可选

block 可选

inline 可选

实现代码如下

父组件:

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

子组件:

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

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

您可能感兴趣的文章:
阅读全文