查找并修复页面意外的overflow

[广告:最高 ¥2000 红包]阿里云服务器、主机等产品通用,可叠加官网常规优惠使用 | 限时领取

响应式网站设计切换不同尺寸后偶尔会出现页面内容比屏幕要宽面导致出现横向滚动条。这里有个脚本可以方便的检测哪个元素超出了屏幕:

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

找到元素后,修改适配即可。

参考资料

Smashing Magazine — For Web Designers And Developers

码中人 微信公众号