vue项目设置scrollTop不起作用(总结)


Posted in Javascript onDecember 21, 2018

今天在开发中,遇到这样一个情景。一个页面中有三个模块,每个模块对应一个标题,每个模块内容都很长,所以需要点击当前模块对应的标题滚动到模块所在位置。

我想的方案是获取到每个模块距离文档顶部的距离,然后将值赋给对应要滚动的元素。 步骤如下:

首先给每个模块一个id,例如:

<div class="module module1" id="anchor-0">
<div class="module module1" id="anchor-1">
<div class="module module1" id="anchor-2">

点击每个标题的时候获取到当前模块的id

<a v-for="(navItem,index) in navData" :key="index" class="navItem" :class="{active:index == i }" @click="goAnchor('#anchor-'+index)">{{navItem.name}}</a>

methods: {
   // tab点击滚动
   goAnchor(val) {
    let anchor = this.$el.querySelector(val);
 }

*最后就可以获取每个模块距离文档顶部的距离了,然后赋值给对应要滚动的元素就可以了

methods: {
   // tab滚动
   goAnchor(val) {
    let anchor = this.$el.querySelector(val);
    this.$nextTick(() => {
     document.querySelector(".el-main").scrollTop = anchor.offsetTop;
    });
   },

切记:在这里一定要加上this.$nextTick()方法,否则document.querySelector(“.el-main”).scrollTop的值永远为0,不会赋值成功的!

container.scrollTop 一直为0不能赋值的解决方法

watch: {
  historyList () {
   this.$nextTick(() => {
    const container = this.$el.querySelector('.scrolldivmain')
    console.log(container.scrollHeight)
    console.log(container.scrollTop)
    this.$refs.scrolldiv.scrollTo(0, container.scrollHeight + 'px')
    container.scrollTop = container.scrollHeight
    container.scrollTop(0, container.scrollHeight)
    console.log(container.scrollTop) // container.scrollTop 一直为0
   })
  }
 }

注意点

确定下滚动条是在哪里显示的

有个方法判断下:

window.addEventListener('scroll', () => {
    var scrollTop = this.$el.querySelector('.scrolldivmain')
    // console.log(scrollTop.scrollHeight)
    console.log(scrollTop.scrollTop) // 查看打印的值是否有变化 如果有 则说明滚滚动条在这个标签中
    // scrollTop.scrollTop = scrollTop.scrollHeight // 可以尝试下 滚动滚动条。一直在底部则可以设置成功
  }, true)

解决方案

需要用到的地方 调用this.scrollToBottom()即可

<!--element-ui-->

<el-main class="scrolldivmain">
  some code
</el-main>
methods: {
 // 滚动到底部
  scrollToBottom () {
   this.$nextTick(() => {
    setTimeout(() => {
     var scrollTop = this.$el.querySelector('.scrolldivmain')
     scrollTop.scrollTop = scrollTop.scrollHeight
    }, 13)
   })
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
easyui validatebox验证
Apr 29 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
详解ES6中class的实现原理
Oct 03 Javascript
swiper实现导航滚动效果
Dec 13 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 #Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 #Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 #Javascript
angularjs http与后台交互的实现示例
Dec 21 #Javascript
JS执行控制之节流模式实例分析
Dec 21 #Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 #Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 #Javascript
You might like
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
python制作最美应用的爬虫
2015/10/28 Python
详解Python的循环结构知识点
2019/05/20 Python
python logging模块的使用总结
2019/07/09 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
体育教育个人自荐信范文
2013/12/01 职场文书
医院护士的求职信范文
2013/12/26 职场文书
爱心捐书活动总结
2014/07/05 职场文书
小学少先队活动总结
2015/05/08 职场文书
结婚堵门保证书
2015/05/08 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书