【发布时间】：2019-03-19 23:44:08
【问题描述】：
我正在 Joomla 中设计一个网页！我遇到了一个问题，我有一个看不到导致页面水平滚动的元素。
我对 js 和 jQuery 完全没用，所以任何人都可以帮助我编写一个脚本，该脚本将输出以控制台所有宽度大于特定值或大于浏览器窗口的元素？或者可以通过其他方式找到哪个元素导致浏览器水平滚动？
我更喜欢单行控制台脚本，但 .js 文件也可以。
【问题讨论】：
【发布时间】：2019-03-19 23:44:08
【问题描述】：
我建议您查看浏览器的开发者控制台。例如，Firefox 可以为您显示漂亮的 3D 视图！
如果你真的想在 JavaScript 中枚举所有宽度大于 x 的元素，使用这个：
$("*").each(function() {
if ($(this).width() > 100) {
console.log(this.tagName + "#" + this.id);
}
});
如果您想与主体的可见宽度进行比较，请使用 document.body.clientWidth 表示 x。
【讨论】：
-
感谢您的及时回复。不幸的是，由于模板复杂，该页面包含如此多的元素，以至于使用 firebug 浏览它们并不是很有效率。如果我将您的脚本粘贴到控制台中，我会收到“TypeError：无法调用 null 的每个方法”。我想我必须把它放在一个 js 文件中并从页面调用它才能正确运行它？
-
你是否包含了 jQuery？
-
@Gatos 如果我在 StackOverflow.com 上将我的脚本插入 Chrome 开发控制台，它会完美运行。我不知道其他浏览器的行为如何。将其放入 JS 文件并在嵌入 jQuery 后运行它肯定可以工作。
-
啊，我不得不用 jQuery 替换 $（我认为是 Joomla 的原因），但现在它运行了。谢谢！
-
@Gatos 是的，据我所知，Joomla 使用 MooTools，如果不使用
jQuery = $.noConflict()或类似的东西，Joomla 会与 jQuery 冲突；)
要获得窗口宽度，只需使用：
$(window).width()
因此，使用 ComFreek 的示例，循环遍历比您的窗口宽度更宽的元素，您将编写如下：
$("*").each(function() {
if ($(this).width() > $(window).width()) {
console.log(this.tagName + "#" + this.id);
}
});
【讨论】：
查找大于窗口宽度的元素的JS代码，在浏览器控制台中使用：
var maxWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > maxWidth) {
console.log(el);
}
}
);
如果这仍然给你带来麻烦，请使用一些极端的 css：
body {
overflow-x: hidden;
}
【讨论】：
跑步对我有帮助
$("body *").each(function() {
$(this).css('background-color', 'red');
});
在控制台上。这有助于我识别导致文档宽度超出窗口宽度的元素。在我的例子中，我们有元素从文档外部移动（你好花哨的网站）。也就是说，没有一个元素比窗口宽度更宽。它们只是简单地定位在普通范围之外。
因为我已经在使用<meta name="viewport" content="width=device-width, initial-scale=1.0">，所以我最终添加了这个 CSS：
body {
overflow-x: hidden;
}
【讨论】：
我用过
var outOfScreen = $('*').filter(function(){if($(this).width()>$(window).width())return true})
然后我可以通过访问outOfScreen var 来检查整个集合。
【讨论】：
您不需要脚本。用 Chrome 打开页面，按 F12 并在元素选项卡中选择每个元素，您可以在页面中看到具有其他颜色和宽度的每个元素。
【讨论】：