java学习视频 R语言 大数据 Anaconda Filter go gridview vue例子 mysql重新初始化 linux全局搜索文件 java解析pdf python循环 python在线教程 python编译环境 python安装程序 java定义接口 java遍历文件夹下所有文件 linux密码 广告代码 服务器操作系统下载 id解锁大师 kms神龙版 pr缩放 矩阵分析与应用 在线手册 js代码混淆工具 万能播放器电脑版 男网红头像 pr抖动特效 globalscape ps文字旋转任意角度 仁王木灵全收集 idt声卡补丁 qq网盘在哪里 错误1004 华安证券大智慧下载 叉叉修改器 ps画笔变成十字 c4dR18 ps透明度怎么调
当前位置: 首页 > 学习教程  > 编程语言

vue中遇到scrollIntoView无效问题处理

2020/12/28 18:32:21 文章标签:

官方文档写的简单: Element 接口的scrollIntoView()方法会滚动元素的父容器,使被调用scrollIntoView()的元素对用户可见。 语法: element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop);// …

官方文档写的简单:

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',
      }) // 回到顶部
    },

本文链接: http://www.dtmao.cc/news_show_550003.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?