时间戳

首页 > 解决方案 > 获取div的滚动进度

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}`)")

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);
    },
}

电流输出：

进度数据保持在道具默认值并且永远不会更新，我没有任何控制台错误。

标签： javascriptvue.jsvue-component

解决方案

推荐阅读