近期在业务中要实现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%; }
如有不足欢迎指正