如何使用JavaScript设置background-size最大值以实现滚动视差效果

• 错误的比较逻辑：heroBg.style.backgroundSize返回值为带%后缀的字符串，直接和字符串'100'做比较时，执行的是字符串字典序匹配，而非数值大小比较。比如值为"90%"时，首字符9的ASCII码远大于1，"90%" <= '100'的判断结果直接为false，循环提前终止，因此背景还没放大到预期就停止了。
• 不必要的while循环：scroll事件会在页面滚动过程中持续触发，每次触发时计算一次当前backgroundSize即可，while循环会导致单次scroll事件内反复修改样式，额外消耗性能。
• 全等判断逻辑不可达：85 + window.pageYOffset/8的计算结果大概率为非整数，拼接%后几乎不可能严格等于字符串'100'，对应的break条件基本不会生效。

const heroBg = document.getElementById('hero');
const INITIAL_SIZE = 85;
const MAX_SIZE = 100;

window.addEventListener('scroll', function() {
    // 计算当前目标背景尺寸数值
    const targetSize = INITIAL_SIZE + window.pageYOffset / 8;
    // 限制最大值不超过100%
    const finalSize = Math.min(targetSize, MAX_SIZE);
    // 赋值样式
    heroBg.style.backgroundSize = `${finalSize}%`;
});

每次滚动事件触发时，直接根据当前滚动偏移量计算目标背景尺寸，通过Math.min限制最大值为100%，无需循环判断，执行效率更高，也能完全符合滚动时逐步放大背景直到100%的需求。

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