Question

我正在Joomla设计一个网页！我遇到一个问题，我有一个我看不到的元素导致页面水平滚动。

我对js和jQuery完全无用所以任何人都可以帮我一个脚本，输出到控制台所有宽度大于特定值或大于浏览器窗口的元素？或者，可以通过其他方式找到哪个元素导致浏览器水平滚动？

我更喜欢单行控制台脚本，但.js文件也可以。

Answer 1

我建议您查看浏览器的开发者控制台。例如，Firefox可以显示一个漂亮的3D视图！

如果您真的想在JavaScript中枚举宽度大于 x 的所有元素，请使用：

$("*").each(function() {
    if ($(this).width() > 100) {
        console.log(this.tagName + "#" + this.id);
    }
});

如果要与正文的可见宽度进行比较，请将document.body.clientWidth用于 x 。

Answer 2

要获得窗口宽度，只需使用：

$(window).width()

因此，要使用ComFreek的示例，要遍历宽度超过窗口宽度的元素，您可以编写如下：

$("*").each(function() {
    if ($(this).width() > $(window).width()) {
        console.log(this.tagName + "#" + this.id);
    }
});

Answer 3

对我有帮助的是

$("body *").each(function() {
    $(this).css('background-color', 'red');
});

控制台上的

。这有助于我识别导致文档宽度超出窗口宽度的元素。在我的情况下，我们有从文档外部移入的元素（你好花哨的网站）。这就是说，没有一个元素比窗口宽度宽。它们只是位于普通边界之外。

由于我已经在使用<meta name="viewport" content="width=device-width, initial-scale=1.0">，我最终添加了这个CSS：

body {
  overflow-x: hidden;
}

Answer 4

我用过

var outOfScreen = $('*').filter(function(){if($(this).width()>$(window).width())return true})

然后我可以通过访问outOfScreen var。

来检查整个集合

Answer 5

JS代码来查找大于窗口宽度的元素，请在浏览器控制台中使用：

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

如果这仍然给您带来麻烦，请使用一些极端的CSS：

body {
  overflow-x: hidden;
}

Answer 6

您不需要脚本。使用Chrome打开页面，按F12，然后在元素选项卡中选择每个元素，您可以在页面中看到其他颜色和宽度的每个元素。

查找宽度大于xxx的所有元素并将其输出到控制台

6 个答案: