如何使用window.scrollY控制滚动时HTML元素样式的变化范围

现有代码未对样式计算值做边界约束，window.scrollY会随页面滚动持续增大，直接用该值计算样式会导致字体无限缩小、下外边距无限增大，超出预期阈值。

• 字体大小以256px为初始值，随滚动距离按比例缩小，最终不低于192px：允许的最大缩小差值为256-192=64px，匹配原有scrollY/4的缩放比例，滚动距离达到256px时字体缩至最小值，后续不再变化。
• 下外边距从0开始随滚动距离增大，最终不超过128px：滚动距离达到128px时外边距达到最大值，后续不再变化。
• 直接使用Math.max、Math.min原生方法做边界截断即可实现阈值限制，无需编写复杂的条件判断。

JavaScript 部分 #

document.addEventListener('DOMContentLoaded', () => {
  const brownie = document.getElementById('backgroundBrownie');
  // 阈值常量统一管理，后续调整参数直接修改此处即可
  const FONT_INIT = 256;
  const FONT_MIN = 192;
  const MARGIN_MAX = 128;
  const FONT_SCALE_RATIO = 4;

  window.addEventListener('scroll', () => {
    const scrollDist = window.scrollY;
    // 最小值兜底：计算值小于192时直接取192
    const currentFontSize = Math.max(FONT_MIN, FONT_INIT - scrollDist / FONT_SCALE_RATIO);
    // 最大值兜底：计算值大于128时直接取128
    const currentMargin = Math.min(MARGIN_MAX, scrollDist);

    brownie.style.fontSize = `${currentFontSize}px`;
    brownie.style.marginBottom = `${currentMargin}px`;
  })
})

HTML 部分 #

<div class="background">
  <div class="backgroundText" id="backgroundBrownie">
    Brownie
  </div>
</div>

• 外层包裹DOMContentLoaded监听是为了确保DOM渲染完成后再获取目标元素，避免getElementById因元素未加载返回null报错；如果你的JS脚本写在body标签最末尾、所有DOM元素之后，可以移除这层监听。
• 如果你需要调整缩放的快慢，直接修改FONT_SCALE_RATIO的数值即可：数值越小字体缩放越快，数值越大缩放越慢。
• 这套逻辑天然支持顶部复位：滚动到页面顶部、scrollY为0时，字体会自动回到256px、margin回到0，无需额外编写复位逻辑。

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