Javascript 获取Div的滚动进度

我正在尝试编写一个vue头组件，当用户从div顶部滚动到底部时，它会在模糊图像覆盖中从0淡入1。我无法使此函数为我正常工作

我现有的守则如下：

.header.-standard(:scroll='onScroll()')
  transition(name='fade-in' appear)
    figure
        img(:src="require(`@/assets/img/backgrounds/${background}`)" @load="onBgLoad")
        img.blurred(:src="require(`@/assets/img/backgrounds/${backgroundBlurred}`)")

道具：{
价值：{
类型：数字，
默认值：0.5，
},
}
数据：函数（）{
返回{
进展：0，
};
},
方法：{
onScroll（）{
const progress=document.getElementById（this.id）.scrollTop/（document.getElementById（this.id）.scrollHeight-document.getElementById（this.id）.clientHeight）；
如果（进度>1）{
这是1.progress=1；
}否则如果（进度<0）{
这个进度=0；
}否则{
这个。进步=进步；
this.progress=this.value；
}
console.log（this.progress）；
},
}

电流输出：

---

进度数据保持默认状态，从不更新，我没有任何控制台错误。

首先，没有前面的

v-if

或

v-else-if

的

v-else

是不正确的。删除

v-else

并重试抱歉，我不小心将v-else留在了中，因为图像是有条件的-它仍然不工作。onScroll回调是否启动？如果没有，请尝试侦听文档正文上的滚动

props: {
    value: {
        type: Number,
        default: 0.5,
    },
}
data: function() {
    return {
        progress: 0,
    };
},
methods: {
    onScroll() {
        const progress = document.getElementById(this.id).scrollTop / (document.getElementById(this.id).scrollHeight - document.getElementById(this.id).clientHeight);
        if (progress > 1) {
            this.progress = 1;
        } else if (progress < 0) {
            this.progress = 0;
        } else {
            this.progress = progress;
            this.progress = this.value;
        }
        console.log(this.progress);
    },
}