如何计算不触发滚动条的最大字体大小？（附现有实现代码）

嘿，我来帮你优化这个思路——你现在的做法是检测到滚动条就直接把字体固定成7px，但其实我们可以更精准地算出刚好不触发滚动条的最大字体尺寸，而不是用一个拍脑袋的固定值。下面给你两种实用的实现方案：

方法一：逐步调整法（简单直观，适合小范围调整） #

这个思路很直白：从初始字体大小开始，一点点增大尺寸，直到出现滚动条就回退一步，最终得到刚好不触发滚动的最大值。

首先先优化基础CSS，避免默认样式干扰高度计算：

body {
  color: black;
  font-family: 'Open Sans', sans-serif;
  padding: 40px;
  margin: 0; /* 去掉默认margin，避免影响高度计算 */
  font-size: 10px; /* 初始字体大小 */
}
li {
  font-size: inherit; /* 让列表项继承body的字体大小，方便统一调整 */
}

然后是核心JS逻辑：

function findMaxFontSizeWithoutScroll() {
  const body = document.body;
  // 获取当前实际生效的字体大小（不是硬写的style值）
  let currentSize = parseFloat(getComputedStyle(body).fontSize);
  const step = 0.5; // 调整步长，越小越精准，计算速度稍慢
  
  // 不断尝试增大字体，直到出现滚动条
  while (true) {
    body.style.fontSize = `${currentSize + step}px`;
    // 强制浏览器重排，确保高度计算是最新的
    document.body.offsetHeight;
    // 检测是否出现滚动条
    if (document.body.scrollHeight > document.documentElement.clientHeight) {
      break;
    }
    currentSize += step;
  }
  
  // 回退到刚好不滚动的字体大小
  body.style.fontSize = `${currentSize}px`;
  console.log(`最大无滚动字体大小: ${currentSize}px`);
}

// 页面加载完成后计算一次，同时监听窗口变化重新计算
window.addEventListener('load', () => {
  findMaxFontSizeWithoutScroll();
});

window.addEventListener('resize', () => {
  findMaxFontSizeWithoutScroll();
});

方法二：二分法（高效快速，适合大范围调整） #

如果你的初始字体和目标字体差距很大，二分法能更快锁定最大值，原理类似猜数字游戏：每次取中间值测试，逐步缩小范围。

JS代码如下：

function findMaxFontSizeWithBinarySearch() {
  const body = document.body;
  let low = 1; // 最小可能的字体大小（px）
  let high = 100; // 最大可能的字体大小（可根据实际情况调整）
  let bestSize = low;
  const tolerance = 0.1; // 精度阈值，越小越精准
  
  while (high - low > tolerance) {
    const mid = (low + high) / 2;
    body.style.fontSize = `${mid}px`;
    document.body.offsetHeight; // 强制重排
    
    if (document.body.scrollHeight <= document.documentElement.clientHeight) {
      // 当前大小没问题，尝试更大的
      bestSize = mid;
      low = mid;
    } else {
      // 当前大小太大，尝试更小的
      high = mid;
    }
  }
  
  body.style.fontSize = `${bestSize}px`;
  console.log(`最大无滚动字体大小: ${bestSize.toFixed(1)}px`);
}

// 绑定加载和窗口 resize 事件
window.addEventListener('load', findMaxFontSizeWithBinarySearch);
window.addEventListener('resize', findMaxFontSizeWithBinarySearch);

几个重要注意事项 #

• 一定要给body加上margin: 0，否则浏览器默认的margin会干扰高度计算
• 如果页面里有固定高度的元素（比如顶部导航栏），计算时要把它们的高度从可用窗口高度里减去
• 步长/精度可以按需调整：步长越小结果越精准，但计算时间会稍长
• 某些字体在特定大小下会出现换行突变，测试时可以多调整几次步长验证结果

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