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 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
JavaScript 一道字符串分解的题目
Aug 03 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 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
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
学习Vue组件实例
2018/04/28 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
Python socket实现简单聊天室
2018/04/01 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
python和js交互调用的方法
2020/06/23 Python
python palywright库基本使用
2021/01/21 Python
会计专业自我鉴定范文
2013/10/06 职场文书
大学开学计划书
2014/04/30 职场文书
环境保护建议书
2014/08/26 职场文书
质量负责人岗位职责
2015/02/15 职场文书
民政工作个人总结
2015/02/28 职场文书
2015年电工工作总结
2015/04/10 职场文书
奠基仪式致辞
2015/07/30 职场文书
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏
Python find()、rfind()方法及作用
2022/12/24 Python