vue 获取屏幕滚动条位置
时间: 2023-08-12 10:02:40 浏览: 281
vue使用keep-alive保持滚动条位置的实现方法
5星 · 资源好评率100%
在 Vue 中,你可以使用 `window.scrollY` 或 `window.pageYOffset` 来获取屏幕滚动条的垂直位置。这两个属性都可以用来获取滚动条距离页面顶部的距离。例如:
```javascript
// 在 Vue 组件中获取滚动条位置
export default {
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll() {
const scrollTop = window.scrollY || window.pageYOffset;
console.log(scrollTop);
}
}
}
```
在该示例中,我们在组件的 `mounted` 钩子中添加了一个滚动事件监听器,并在 `handleScroll` 方法中获取了滚动条的位置。当组件销毁时,我们还需要在 `destroyed` 钩子中移除滚动事件监听器,以防止内存泄漏。
请注意,`window.scrollY` 和 `window.pageYOffset` 在不同浏览器中可能会有不同的兼容性,你可以根据自己的需求选择其中一个来使用。
阅读全文