因为在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. 第 4 篇 Scrum 冲刺博客

    每天举行会议 会议照片: 昨天已完成的工作与今天计划完成的工作及工作中遇到的困难: 成员姓名 昨天完成工作 今天计划完成的工作 工作中遇到的困难 蔡双浩 实现收藏夹功能 实现重设计的个人界面功能 无 ...

  2. element ui只输入数字校验

    注意:圈起来的两个地方,刚开始忘记写type='number'了,导致可以输入'123abc'这样的,之后加上了就OK了

  3. ARM架构安装Kubernetes集群

    背景 类型 版本 操作系统 CentOS Linux release 7.6.1810 (AltArch) 内核 Linux master 4.18.0-80.7.2.el7.aarch64 硬件配置 ...

  4. 苹果M1芯片各种不支持,但居然可以刷朋友圈!你会买单吗?

    上个月和大家一起分享过,最新的苹果M1芯片上支持的各种开源软件.什么?还没读过?赶紧点这里:一文解读苹果 M1 芯片电脑上的开源软件. 现在已经过去了半个月,想必有不少的同学都已经入手了最新的苹果M1 ...

  5. 移动端H5微信分享

    移动端H5微信分享功能,可以使项目更好地传播. 微信官方教程文档:  微信JS-SDK说明文档 步骤一:绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置&quo ...

  6. DVWA各等级文件上传漏洞

    file upload 文件上传漏洞,攻击者可以通过上传木马获取服务器的webshell权限. 文件上传漏洞的利用是 够成功上传木马文件, 其次上传文件必须能够被执行, 最后就是上传文件的路径必须可知 ...

  7. DG修改SYS用户密码(ORA-16810,ORA-01017)

    修改主库PROD1密码后,查看configuration状态看到以下报错: [oracle@edgzrip1-PROD1 ~]$ dgmgrl sys/oracleDGMGRL for Linux: ...

  8. 保姆级教程,带你认识大数据,从0到1搭建 Hadoop 集群

    大数据简介,概念部分 概念部分,建议之前没有任何大数据相关知识的朋友阅读 大数据概论 什么是大数据 大数据(Big Data)是指无法在一定时间范围内用常规软件工具进行捕捉.管理和处理的数据集合,是需 ...

  9. php 文件上传错误

    假设文件上传字段的名称img,则: $_FILES['img']['error']有以下几种类型 1.UPLOAD_ERR_OK 其值为 0,没有错误发生,文件上传成功. 2.UPLOAD_ERR_I ...

  10. matplotlib之scatter

    Matplotlib之scatter 1,使用scatter绘制散点图并设置其样式: 1 import matplotlib.pyplot as plt 2 3 '''使用scatter绘制散点图并设 ...