因为在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. 百度前端技术学院-基础-day20-21

    第二十到第二十一天:让你和页面对话 task1 控制元素的显示及隐藏 实现以下功能: 当用户选择了 School 的单选框时,显示 School 的下拉选项,隐藏 Company 的下拉选项 当用户选 ...

  2. <UnityTheGreat><001>获取指定目录下指定类型的所有文件的名称

    #region Environment Windows 10 Unity 2019.4.16f1c1 LTS VSCode 1.52 https://github.com/MirzkisD1Ex0/U ...

  3. Linux命令-2.文件属性

    在Linux系统中文件的属性有:文件类型.属主属性.属组属性.其他属性,使用10个字符表示,如下图: 其中第0位表示文件类型: 当为[ d ]则是目录 当为[ - ]则是文件: 若是[ l ]则表示为 ...

  4. VMware提示Device/Credential Guard不兼容

    问题环境 win10系统版本 win10 2004企业版 vmware 版本 vmware 15 pro 问题 虚拟机开启时候弹窗提示:"VMware与Device/Credential G ...

  5. ES6新增数据类型Symbol

    Symbol的含义? ES6(2015) 引入了第七种原始数据类型Symbol,Symbol英文文意思为 符号.象征.标记.记号,在 js 中更确切的翻译应该为独一无二的 Symbol的使用? Sym ...

  6. DirectX 11的初始化

    总体来说可以概括为以下几个步骤: 创建Device和Context 创建SwapChain 为BackBuffer创建View 创建Depth/Stencil Buffer,并为之创建View 将Vi ...

  7. 个人微信公众号搭建Python实现 -接收和发送消息-基本说明与实现（14.2.1)

    @ 目录 1.原理 2.接收普通消息 3.接收代码普通消息代码实现 1.原理 2.接收普通消息 其他消息类似参考官方文档 3.接收代码普通消息代码实现 from flask import Flask, ...

  8. Python 刷题笔记

    Python 刷题笔记 本文记录了我在使用python刷题的时候遇到的知识点. 目录 Python 刷题笔记 选择.填空题 基本输入输出 sys.stdin 与input 运行脚本时传入参数 Pyth ...

  9. Python实现全自动购买火车票！抢票回家过年咯

    本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理这个是实现结果,因为一天只能取消三次,所以最后一步点击确认被我注释了1.首先实现使用selenium登 ...

  10. Python 中日期函数

    导入日期库 datetime import datetime # 或者from datetime import datetime ,date 字符串转datetime