首页 > 其他分享 >添加元素,滚动到新元素,scroll的使用

添加元素,滚动到新元素,scroll的使用

时间:2023-02-27 11:36:19浏览次数:27  
标签:滚动 scrollTo 元素 添加 child 新元素 scroll

如图,每次添加新元素,希望新元素能出现在视野内,删除新元素,也希望最后一个元素出现在视野内。

 // 添加
    addFilter() {
      let obj = {
        name: '',
        fieldRemarks: '',
        symbolType: '',
        symbolEnums: [],
        fieldEnum: '',
        fieldEnums: []
      };
      this.filterData.push(obj); //添加新元素
// 滚动,这里一定要使用this.$nextTick,因为js逻辑操作要在添加元素之后执行,否则最新元素永远都不在最下面视野之内。
      this.$nextTick(() => {
        this.scrollTo();
      });
    },
    scrollTo() {
      const parent = document.querySelector('#filterCriteriaCon');
      const child = document.getElementsByClassName('filter-criteria');
      console.log('lastChild', child[child.length - 1].offsetTop);
      parent.scrollTo({
        top: child[child.length - 1].offsetTop,
        behavior: 'smooth'
      });
    },

标签:滚动,scrollTo,元素,添加,child,新元素,scroll
From: https://www.cnblogs.com/sinceForever/p/17159066.html

相关文章

  • k8s 之 滚动更新
    背景公司做的是医院的院内系统,医院存在24小时的急诊,所以需要程序7*24小时不间断;在程序更新的时候,就需要滚动更新。DockerSwarm中的滚动更新目前公司部署使用的是docke......
  • window.addEventListener注册滚动scroll事件不生效
    window.addEventListener('scroll',xxx方法)不被触发的原因今天在做项目的时候,需要做一个滚动的效果。发现在mounted(){window.addEventListener('scroll',th......
  • Android Studio GridLayout & ScrollView
    GridLayout是网格布局感觉在设计表格的时候会有一些用处知识点只有两个 columnCount属性,指定了网格的列数,即每行放多少个rowCount属性,指定行数,即每行放多少个要注意......
  • k8s的滚动更新
    一、什么是滚动更新当某个服务需要升级时,传统的做法是,先将要更新的服务下线,业务停止后再更新版本和配置,然后重新启动服务。如果业务集群规模较大时,这个工作就变成了一个......
  • 组件view和scroll-view的使用
         ......
  • css-元素使用100vw|vh出现滚动条
    给元素100vw与100vh,发现界面出现横向和竖向滚动条...<style>.container{width:100vw;height:100vh;}</style><body><divclass="......
  • elementUI 表格翻页后 滚动条回到顶部/第一行
    情况1:组件中直接使用的是el-table<el-table ref="table"></el-table>那么需要在用到的地方直接使用this.$nextTick(()=>{   this.$refs.table.bodyWrapper.scr......
  • JS滚动到页面底部
    code//例如:页面高度1000,屏幕高度900,相差100,//scrollTop:向上滚动100像素,就到达页面底部了。functionScrollToBottom(){$("html,body").animate({scrollTop:$......
  • 【Vue Router】015-滚动行为*
    1.15滚动行为*直接贴文档吧,使用时再进行详细探索,很难所有功能都亲自实现一遍!1.15.1概述使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新......
  • scrollView 嵌套 recyclerview 时 BaseQuickAdapter 九宫格图片拖拽到底部删除
    九宫格图片布局,长按直接拖拽图片,长按时显示底部删除布局,拖拽到删除布局处松手可删除布局,最后添加按钮不可拖拽,基于BaseQuickAdapter基础上实现BaseQuickAdapter确实很......