如何使用JavaScript实现滚动时同步动态调整字体大小

这是个很有意思的交互效果！我来给你分享一个简洁且性能友好的实现方案，核心是监听滚动事件并动态计算字体大小，再配合CSS过渡让变化更平滑。

核心思路 #

• 监听页面滚动事件，获取当前滚动位置
• 定义字体大小的最小值和最大值，确定变化范围
• 计算滚动位置相对于页面总可滚动高度的比例，将这个比例映射到字体大小的变化区间
• 用CSS过渡实现字体大小的平滑动画，避免生硬跳转

完整代码示例 #

HTML结构 #

先准备一个包含足够内容的容器，确保页面可以滚动：

<div class="scroll-content">
  <h1>滚动试试字体变化</h1>
  <p>向下滚动时字体逐渐缩小，向上滚动时逐渐恢复~</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>重复添加足够多的段落，让页面拥有可滚动空间...</p>
</div>

CSS样式 #

设置初始字体大小，加上过渡动画，并让页面有足够的滚动高度：

.scroll-content {
  font-size: 24px; /* 初始最大字体大小 */
  transition: font-size 0.1s ease; /* 平滑过渡，时间可调整 */
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  line-height: 1.6;
}

/* 让页面产生滚动条 */
body {
  height: 200vh;
  margin: 0;
}

JavaScript逻辑 #

监听滚动事件，计算并动态更新字体大小：

// 获取目标内容容器
const content = document.querySelector('.scroll-content');

// 自定义字体大小范围
const minFontSize = 12; // 滚动到底部时的最小字体
const maxFontSize = 24; // 回到顶部时的最大字体

// 计算页面总可滚动高度（页面总高度 - 窗口可视高度）
function getTotalScrollHeight() {
  return document.documentElement.scrollHeight - window.innerHeight;
}

// 处理滚动逻辑的函数
function handleScroll() {
  const scrollTop = window.scrollY;
  const totalScroll = getTotalScrollHeight();

  // 如果页面没有可滚动空间，直接返回
  if (totalScroll <= 0) return;

  // 计算滚动比例（0 = 顶部，1 = 底部）
  const scrollRatio = scrollTop / totalScroll;

  // 根据比例计算当前字体大小：从max到min线性变化
  const currentFontSize = maxFontSize - (scrollRatio * (maxFontSize - minFontSize));

  // 设置字体大小，保留1位小数避免频繁抖动
  content.style.fontSize = `${currentFontSize.toFixed(1)}px`;
}

// 监听滚动事件
window.addEventListener('scroll', handleScroll);

优化：添加防抖提升性能 #

滚动事件触发频率极高（每秒可能几十次），为了避免频繁计算导致的性能问题，可以给滚动处理函数加防抖：

// 防抖函数：延迟执行，减少函数调用次数
function debounce(func, delay = 10) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

// 用防抖包裹滚动处理函数
window.addEventListener('scroll', debounce(handleScroll));

自定义调整建议 #

• 修改minFontSize和maxFontSize可以自定义字体的变化范围
• 调整CSS中transition的时间（比如改成0.2s）可以让动画更慢或更快
• 如果想针对某个容器内部的滚动效果，只需要把window换成目标容器元素，用element.scrollTop和element.scrollHeight - element.clientHeight计算滚动比例即可

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