如何在可视屏幕的div内实现Parallax Scroll并解决图片滚动空白问题

API 探路者

2026-5-6

解决视差滚动导致容器底部空白的问题

我完全懂你碰到的这个麻烦——给图片加了视差滚动后，底部的图片因为上移幅度过大，容器里就露出空白了。这是因为咱们之前的视差逻辑没有给图片的移动距离设上限，让它移得太靠上，超出了容器的可视范围。咱们来调整一下代码，把这个问题解决掉：

问题根源

当前的代码是让图片跟着滚动距离固定乘以-0.06的系数上移，但没有考虑图片本身的尺寸和容器的边界。你的图片高度是容器的110%（height:110%），这意味着图片原本就比容器高23px（230*0.1），当滚动带来的上移超过这个数值时，图片的底部就会移出容器，空白自然就出现了。

解决方案：限制最大上移距离

我们需要给每个图片的视差移动加一个上限，确保图片最多只上移它超出容器的那部分高度，这样容器底部就不会露出空白了。

修改后的完整代码如下：

HTML（保持不变）

<div class="workImg"> <img class="inWorkImg" src="img/08.png"/></div>
<div class="workImg"> <img class="inWorkImg" src="img/09.png"/></div>
<div class="workImg"> <img class="inWorkImg" src="img/10.png"/></div>
<div class="workImg"> <img class="inWorkImg" src="img/11.png"/></div>

CSS（保持不变）

.workImg{ position: absolute; width: 80%; height: 230px; bottom: 15px; overflow: hidden; }
.inWorkImg { object-fit: cover; height: 110%; }

修改后的jQuery代码

// 缓存视差元素和数量
var parallaxElements = $('.inWorkImg'), 
    parallaxQuantity = parallaxElements.length;

// 提前计算每个图片的最大允许上移距离（图片超出容器的部分）
var maxOffsets = [];
parallaxElements.each(function() {
    var imgHeight = $(this).height();
    var containerHeight = $(this).parent('.workImg').height();
    // 最大上移距离是图片超出容器的高度，取正值，后面用负数表示上移
    maxOffsets.push(imgHeight - containerHeight);
});

function isInViewport(element) {
    var rect = element.getBoundingClientRect();
    return (
        rect.top <= window.innerHeight &&
        rect.bottom >= 0
    );
}

$(window).on('scroll', function () {
    window.requestAnimationFrame(function () {
        for (var i = 0; i < parallaxQuantity; i++) {
            var currentElement = parallaxElements.eq(i);
            // 只对可见的元素执行视差计算
            if(isInViewport(currentElement[0])) {
                var scrolled = $(window).scrollTop();
                // 计算当前偏移量
                var currentOffset = scrolled * -0.06;
                // 限制偏移量，确保不会超过最大允许上移值
                var limitedOffset = Math.max(currentOffset, -maxOffsets[i]);
                currentElement.css({ 'transform': 'translate3d(0,' + limitedOffset + 'px, 0)' });
            }
        }
    });
});

关键改进点

提前计算最大偏移量：在页面加载时就算出每个图片超出容器的高度，避免滚动时重复计算，提升性能。
添加边界限制：用Math.max(currentOffset, -maxOffsets[i])确保图片的上移距离不会超过它超出容器的部分——这样图片最多只会把超出的部分完全移入容器，不会再往上移，也就不会露出空白了。
优化可见性判断：把isInViewport的判断放到循环里，确保只对当前可见的元素执行视差计算，减少不必要的DOM操作。

这样调整后，你的视差滚动效果会正常工作，同时容器底部也不会再出现空白啦！

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