因为在vue中,某个组件内 使用scrollTop赋值 滚动条没有变化

使用scrollTo 也不行(window.scorllTo 或者dom.scrollTo)

所以可以考虑使用投机取巧的办法:

利用在指定位置添加一个div 然后通过div.scrollIntoView() 滚动到这个div

<div class="position-box"></div>

// 跳转到positionbox
document.getElementsByClassName('position-box')[0].scrollIntoView();

Vue 组件内滚动条 滚到到底部的更多相关文章

  1. vue之Better-Scroll组件 将滚动条滚到最底部

    首先我们需要使用scrollTo这个方法: scrollTo(x, y, time, easing) 参数: {Number} x 横轴坐标(单位 px) {Number} y 纵轴坐标(单位 px) ...

  2. vue 组件内 directives指令的调用方式 <base-table v-auto-height:tableHeight="{vm:this, diffHeight:ahTable.diffHeight}"

    vue 组件内 directives指令的调用方式 <base-table v-auto-height:tableHeight="{vm:this, diffHeight:ahTabl ...

  3. vue-gemini-scrollbar(vue组件-自定义滚动条)

    vue-gemini-scrollbar(vue组件-自定义滚动条) https://segmentfault.com/a/1190000013338560

  4. 解决vue组件内前置路由守卫beforeRouteEnter无法获取上下文this

    问题描述 vue框架,只有在报名页面报名成功,然后自动跳转到订单详情,才弹出一个引流弹窗,其他情况均不弹出,我就想到使用vue 的组件内前置守卫beforeRouteEnter来实现.beforeRo ...

  5. canvas实现倒计时效果示例(vue组件内编写)

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...

  6. vue 组件内的守卫

    1.beforeRouteEnter ()  // 进入该组件之前要去进行的逻辑操作, 2.beforeRouteLeave() // 离开该组件之前要去进行的逻辑操作(可清除定时器等耗用内存的变量, ...

  7. jquery如何判断滚动条滚到页面底部并执行事件

    首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那 ...

  8. JS实现判断滚动条滚到页面底部并执行事件的方法

    需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那 ...

  9. vue 内容增加滚动条自动定位至底部

    this.$nextTick(() => { document.body.scrollTop = document.body.scrollHeight; console.log(document ...

随机推荐

  1. 题解-[国家集训队]Crash的数字表格 / JZPTAB

    题解-[国家集训队]Crash的数字表格 / JZPTAB 前置知识: 莫比乌斯反演 </> [国家集训队]Crash的数字表格 / JZPTAB 单组测试数据,给定 \(n,m\) ,求 ...

  2. day106:MoFang:BUG:获取数据验证token是否过期&相册/相机取消头像无法显示&MongoDB

    目录 BUG1:前端在获取数据时,要检验token是否过期 BUG2:相册/相机取消后设置页面头像无法显示 MongoDB 1.MongoDB基本介绍 2.MongoDB安装 3.MongoDB:通用 ...

  3. word IF嵌套实现登记学生成绩(合格,良好,优秀)

    word IF函数 IF语法 IF(判断条件,条件成立的动作,条件不成立的动作),以逗号(英文)分隔 例:=IF( 0 < 1 , "good" , "bad&qu ...

  4. postgresql 运行sql文件

    方法一: [postgres@node01 ~]$ psql -Upostgres postgres=# \l List of databases Name | Owner | Encoding | ...

  5. 在linux下使用Apache搭建文件服务器

    目录 一.关于文件服务器 二.使用Apache搭建文件服务器 三.测试文件服务器是否可用 一.关于文件服务器 ​ 在一个项目中,如果想把公共软件或者资料共享给项目组成员,可以搭建一个简易的文件服务器来 ...

  6. Mybatis(一)--简介

    一.JDBC问题分析: 从之前我们所写到过的jdbc代码或工具类可知: 1).数据库连接创建,释放频繁将造成系统资源浪费从而影响系统性能: 2).SQL语句在代码中硬编码,造成代码不易维护,SQL变动 ...

  7. 探究 | App Startup真的能减少启动耗时吗

    前言 之前我们说了启动优化的一些常用方法,但是有的小伙伴就很不屑了: "这些方法很久之前就知道了,不知道说点新东西?比如App Startup?能对启动优化有帮助吗?" ok,既然 ...

  8. 【Go语言绘图】图片添加文字(二)

    这一篇将继续介绍gg库中绘制文字相关的方法,主要包括:DrawStringAnchored().DrawStringWrapped().MeasureMultilineString().WordWra ...

  9. Docker 部署 _实现每日情话 定时推送(apscheduler)

    由于最近工作比较忙,后续博客可能更新不及时,哈哈 前言: 由于python对于微信推送不够友好,需要扫码登录,短信接口需要RMB.我就想到了qq邮箱发送到好友,然而微信有qq邮箱提醒功能,就实现了我需 ...

  10. VSCode---REST Client接口测试辅助工具

    我们一般都会用 PostMan 来完成接口测试的工作,因为用起来十分简单快捷,但是一直以来我也在寻找更好的方案,一个不用切换窗口多开一个 app 的方案 -- 终于在使用 VSCode 一段时版本间, ...