实现隧道效果：将滚动位置转换为0至3区间的变量值

我要复刻隧道滚动效果，需求是：把滚动位置转换成0到3的数值，每100vh的滚动区间内，对应元素完成从0到3的缩放变化。目前用的jQuery函数计算逻辑有问题，代码如下：

$(window).scroll(function() {

    var scr = $(window).scrollTop();
    var h = window.innerHeight;

    $('.img-container').each(function(i, el) {
       var start = h*i;
       var end = start + h;
       if (scr >= start && scr < end) {

         var percZ = (scr-start)*3/((scr-start)+h);
         $(el).css('transform', 'scale('+percZ+')');

         if (percZ > 3) {
           $(el).css('transform', 'scale(3)');
         }
       }
   });
});

问题分析 #

原代码里的percZ计算逻辑错误，(scr-start)*3/((scr-start)+h)这个公式永远达不到3——当滚动到区间底部（scr-start = h）时，结果仅为h*3/(h+h)=1.5，完全不符合0到3的需求。

修正方案 #

正确的计算逻辑是基于当前区间内的滚动占比：用(scr - start)除以区间高度h得到0到1的比例，再乘以3就得到0到3的目标数值。同时要处理边界情况，确保数值不会超出0-3的范围。

修正后的代码：

$(window).scroll(function() {
    var scr = $(window).scrollTop();
    var h = window.innerHeight;

    $('.img-container').each(function(i, el) {
        var start = h * i;
        var end = start + h;
        let percZ;

        if (scr < start) {
            // 未进入当前元素的滚动区间，缩放为0
            percZ = 0;
        } else if (scr >= end) {
            // 滚动过当前元素的区间，缩放固定为3
            percZ = 3;
        } else {
            // 区间内滚动，计算0-3的缩放值
            const scrollRatio = (scr - start) / h;
            percZ = scrollRatio * 3;
        }

        $(el).css('transform', `scale(${percZ})`);
    });
});

关键说明 #

• 滚动位置在元素对应区间上方时，元素缩放保持0；
• 滚动进入区间后，根据滚动距离占区间高度的比例，线性计算0到3的缩放值；
• 滚动完全离开区间后，元素缩放固定为3；
• 用模板字符串代替字符串拼接，代码更简洁易读。

内容的提问来源于stack exchange，提问作者ilariaroglieri