8

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

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

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

4

6 回答 6

18

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

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

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

如果要与主体的可见宽度进行比较，document.body.clientWidth请使用x 。

于 2013-10-26T17:54:59.697 回答
5

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

$(window).width()

因此，要使用 ComFreek 的示例，循环遍历比您的窗口宽度更宽的元素，您将编写如下：

$("*").each(function() {
    if ($(this).width() > $(window).width()) {
        console.log(this.tagName + "#" + this.id);
    }
});
于 2013-10-26T17:58:36.127 回答
4

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

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

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

body {
  overflow-x: hidden;
}
于 2018-07-13T20:44:28.483 回答
2

对我有帮助的是跑步

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

在控制台上。这有助于我识别导致文档宽度超出窗口宽度的元素。在我的例子中，我们有元素从文档外部移入（你好花哨的网站）。也就是说，没有一个元素比窗口宽度更宽。他们只是简单地定位在普通界限之外。

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

body {
  overflow-x: hidden;
}
于 2016-08-25T10:29:13.887 回答
1

我用了

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

所以我可以通过访问outOfScreenvar 来检查整个集合。

于 2014-04-03T00:45:30.310 回答
-1

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

于 2013-10-26T18:00:22.580 回答