javascript - Vuejs2窗口获取滚动高度

Question

我试图在用户向下滚动时向navbar添加一个sticky类，并在用户滚动到顶部时删除该类。

所以基本上我正在尝试找到滚动的高度。我有:

mounted(){
    this.setUpRoutes();
    window.addEventListener('scroll', this.handleScroll);
},

destroyed () {
    window.removeEventListener('scroll', this.handleScroll);
},

methods:{
    handleScroll(event){
        console.log("handling event scroll here", event.height());
    }
}

但出现错误:event.height() 不是函数

如何确定滚动的高度？

Answer 1

您需要找到scrollTop，而不仅仅是offsetHeight。

例如:

Get scroll position and direction with vanilla JS

mounted(){
    this.setUpRoutes();
    window.addEventListener('scroll', this.handleScroll);
},
destroyed () {
    window.removeEventListener('scroll', this.handleScroll);
},

methods:{
 handleScroll(event){
    // I think   document.body.scrollTop is not FF compatible, but for example.
    console.log("handling event scroll here", {top: document.body.scrollTop, height: window.innerHeight });
  }

}