手机端页面横向滚动条排查方法

16 March 2026

复现
定位

AI教我学习前端系列。

移动端因为页面较窄，很容易由于内部元素配置有问题导致出现横向滚动条。但手机端排查难度又比较大，还是需要在PC端排查。

复现

在桌面Chrome打开调试页面，切换成移动端模式。
我的情况要复杂些，桌面调试一开始无法复现问题，是分辨率对不上的问题，遂又搭建了设备信息检测工具。如下图所示：
在浏览器中填入问题设备的像素，问题复现。

IMG-THUMBNAIL

定位

如果是简单的页面，通过Elements工具就能发现问题了，可以把鼠标放到每个Element上面看，Chrome自然会提示宽度。如果宽度超出了第一步获取到的数值，那么恭喜你，你找到问题元素了。但如果页面比较复杂，元素嵌套比较深，通过Elements工具就比较麻烦了。这时可以考虑通过Chrome的Console工具来排查。在Console中输入以下代码，回车执行：

// 查找所有溢出视口的元素（带定位+高亮）
(function() {
  const allElements = document.querySelectorAll('*');
  const overflowElements = [];
  
  // 先清除之前的高亮（避免干扰）
  document.querySelectorAll('[data-overflow-highlight]').forEach(el => {
    el.style.removeProperty('border');
    el.removeAttribute('data-overflow-highlight');
  });

  allElements.forEach(el => {
    const rect = el.getBoundingClientRect();
    // 检查元素是否超出视口宽度（排除不可见元素，减少干扰）
    if ((rect.right > window.innerWidth || rect.left < 0) && rect.width > 0) {
      // 1. 给溢出元素加红色边框（可视化高亮）
      el.style.border = '2px solid red !important';
      el.style.boxShadow = '0 0 10px red !important';
      el.setAttribute('data-overflow-highlight', 'true');

      // 2. 构造定位信息（方便查找）
      let selector = '';
      if (el.id) {
        selector = `#${el.id}`; // 有id直接用#id
      } else if (el.className) {
        // 处理多class，转为.类名1.类名2
        selector = `.${el.className.trim().replace(/\s+/g, '.')}`;
      } else {
        selector = el.tagName.toLowerCase(); // 无class/id用标签名
      }

      // 3. 收集信息（包含元素本身，关键！）
      overflowElements.push({
        元素引用: el, // 核心：Console点击可跳转到Elements面板
        标签名: el.tagName,
        类名: el.className,
        ID: el.id || '无',
        选择器: selector,
        元素宽度: `${rect.width.toFixed(2)}px`,
        元素右边界: `${rect.right.toFixed(2)}px`,
        视口宽度: `${window.innerWidth}px`,
        溢出宽度: `${(rect.right - window.innerWidth).toFixed(2)}px` // 超出多少
      });
    }
  });

  // 输出表格（可点击「元素引用」列跳转到Elements）
  console.table(overflowElements);
  
  // 提示信息
  console.log('%c✅ 溢出元素已标红边框，Console表格中点击「元素引用」可直接定位到Elements面板', 'color: green; font-weight: bold');
  console.log('%c⚠️ 刷新页面可清除红色边框', 'color: orange; font-weight: bold');
})();

如果有问题，所显示一个Array，点击展开它，点击「元素引用」会跳到Elements面板，这就是有问题的元素，右击这个元素选择「Scroll into View」，鼠标放上去看宽度即可诊断。

IMG-THUMBNAIL

原文链接：手机端页面横向滚动条排查方法，转载请注明来源！

– EOF –

CSS 1