时间:2021-05-26
今天在开发中,遇到这样一个情景。一个页面中有三个模块,每个模块对应一个标题,每个模块内容都很长,所以需要点击当前模块对应的标题滚动到模块所在位置。
我想的方案是获取到每个模块距离文档顶部的距离,然后将值赋给对应要滚动的元素。 步骤如下:
首先给每个模块一个id,例如:
点击每个标题的时候获取到当前模块的id
*最后就可以获取每个模块距离文档顶部的距离了,然后赋值给对应要滚动的元素就可以了
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 }) } }注意点
确定下滚动条是在哪里显示的
有个方法判断下:
解决方案
需要用到的地方 调用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) }) }}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
1.在很多的项目中,我们都会用到日期插件,然后当我在vue中使用bootstrapdatetimepicker时发现双向绑定不起作用了,bootstrapdat
描述在项目集成了vue-flickity组件后发现,该组件参考flickity官网的fullscreen配置不起作用实现方法需要添加flickity-fulls
1、如果设置了errorContainer、errorLabelContainer、wrapper,则errorPlacement不起作用复制代码代码如下:..
公司新开发的项目需要兼容到IE9+就在index.html页面加入不起作用总结方法:1、兼容IE9/IE10可能会遇到语法或者Promise错误,安装babel
误区#5:AWE在64位SQLSERVER中必须开启错误!在坊间流传的有关AWE的设置的各种版本让人非常困惑。比如说如何设置起作用,如何设置不起作用,在32位和