scrollTop设置后一直为0的解决方案(最全)
2021/8/21 6:06:33
本文主要是介绍scrollTop设置后一直为0的解决方案(最全),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
近期在业务中要实现keep-alive记住滚动条位置,发现scrollTop一直为0,排除各个组件的问题后仍未找到解决办法,最后考虑到是css的问题。
mounted() { //一开始使用的@scroll绑定在container上没有触发,后来发现使用这种方法有效 window.addEventListener('scroll', this.scroll, true) }, methods: { //封装的兼容性方法 scroll() { //获得页面向左、向上卷动的距离 function getScroll() { return { left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0, top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 }; } //这里的this.$nextTick一定要有 this.$nextTick(() => { //这里是外层container const container = this.$el.querySelector('.container') if (container) { //正常获取scrollTop console.log(this.$el.querySelector('.container').scrollTop); } }) } }
.container { /* 这两个是必须要有的,不要写成overflow-y:auto; */ overflow-y: scroll; height: 100%; }
如有不足欢迎指正
这篇关于scrollTop设置后一直为0的解决方案(最全)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28pyqt 怎么打包整个项目-icode9专业技术文章分享
- 2024-09-28laravel Commands 创建带有参数的 Artisan 命令的步骤和示例-icode9专业技术文章分享
- 2024-09-28antd怎么实现渲染tiff图片-icode9专业技术文章分享
- 2024-09-28英文半角中划线和中文全角的中划线有什么区别-icode9专业技术文章分享
- 2024-09-28nvm npm 和node 他们之间有什么关系-icode9专业技术文章分享
- 2024-09-28Node Version Manager (nvm)使用教程-icode9专业技术文章分享
- 2024-09-28nvm命令太慢,是什么原因-icode9专业技术文章分享
- 2024-09-28Kotlin 如何增加、删除和修改 MutableStateFlow 中的值。-icode9专业技术文章分享
- 2024-09-28Kotlin的stateFlow.update 写法介绍-icode9专业技术文章分享
- 2024-09-28kotlin 怎么获取当前时间格式-icode9专业技术文章分享