因为在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. utc时间转换为太平洋时间

    方法一 from datetime import datetime from pytz import timezone cst_tz = timezone('Asia/Shanghai') utc_t ...

  2. Bootstrap 的基本使用

    一.Bootstrap简介 Bootstrap 是目前受欢迎的前端框架之一,是基于HTML,CSS,JavaScript的,它简洁灵活,使web开发更加快捷 中文官网:http://www.bootc ...

  3. centos7 安装netstat命令工具

    [root@node01 yum.repos.d]# yum install -y net-tools Loaded plugins: fastestmirror Loading mirror spe ...

  4. SpringBoot从入门到精通教程（四）

    前端时间整合SSM ,发现了一个现象,在整合的时候 配置文件过于复杂. 1.建工程,建目录,导入jar包. 2.配置 数据源 映射信息 等等 ... 3. 还有 各种 拦截器,控制器 ,头都大了... ...

  5. Mysql技术内幕之InnoDB锁探究

    自7月份换工作以来,期间一直在学习MySQL的相关知识,听了一些视频课,但是一直好奇那些讲师的知识是从哪里学习的.于是想着从书籍中找答案.毕竟一直 看视频也不是办法,不能形成自己的知识.于是想着看书汲 ...

  6. 一劳永逸，解决基于 keep-alive 的后台多级路由缓存问题

    用过 vue-element-admin 的同学一定很清楚,路由的配置直接关系侧边栏导航菜单的展示,也得益于这种设计思路,几乎大部分后台框架都采用这个方案,当然也包括了我写的 Fantastic-ad ...

  7. Thymeleaf是个什么东东？

    Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎,能够处理HTML,XML,JavaScript,CSS甚至纯文本. Thymeleaf的主要目标是提供一个优雅和高度可维护的创建 ...

  8. 实验题目：python面向对象程序设计

    1.定义并实现一个矩形类Rectangle,其私有实例成员为矩形的左下角与右上角两个点的坐标,能设置左下角和右上角两个点的位置,能根据左下角与右上角两个点的坐标计算矩形的长.宽.周长和面积,另外根据需 ...

  9. java基础: ArrayList集合应用, ArrayList增删改查详解,综合java基础实现学生管理系统,

    1.ArrayList 集合和数组的区别 : 共同点:都是存储数据的容器 不同点:数组的容量是固定的,集合的容量是可变的 1.1 -ArrayList的构造方法和添加方法 public ArrayLi ...

  10. Phthon几个特殊的函数

    Python有几个相对特殊的函数,他们并不会提高工作效率,但是会使代码优雅简洁,其中包括lambda, map, reduce, filter, yeild. 第一:lambda,贴些代码体会. 1 ...