标签： 网页制作

有时候我们制作页面，搞着搞着发现超宽，出现横向滚动条。于是我们就要想办法调整样式，但是往往超宽的只有那么一两个元素，并不是很好找，所以我就写了下面一个脚本，在页面里跑一下就能找到超宽的元素，然后针对性调整一下样式就可以了：

// 这里的 375 主要针对基于 iPhone 6 开发移动端页面时
function traverse(parent) {
  let target;
  for (const elem of parent.children) {
    const rect = elem.getBoundingClientRect();
    const {left, width} = rect;
    if (left + width > 375) {
      target = elem;
      break;
    }
    target = traverse(elem);
    if (target) {
      return target;
    }
  }
  if (target) {
    return target;
  }
}

使用的时候，打开页面的开发者工具，将这段代码复制到 console 里面，然后执行 traverse(document.body) 就可以找到超宽的元素，然后想办法调整它即可。

当然我们也可以继续用这个函数探索可疑元素，找到更具体的超宽元素；或者找到其它超宽元素。这些就留给大家自行探索吧。