哪个元素导致水平滚动条?自动检测

时间:2013-01-03 20:05:24

标签: javascript html css scrollbar

网站和HTML应用上的水平滚动条通常不利于可用性和不受欢迎。发现它们出乎意料地突然出现并且我需要一种快速调试和删除它们的方法,这是相当普遍的。

在设计中找到违规HTML元素的快捷方式是什么?

是的,你可以逐个浏览你的页面删除/隐藏元素,直到你找到一个嫌疑人,但这很费时,特别是如果有多个违规元素。单击快捷方式或运行脚本并将所有可疑元素突出显示,概述或打印到控制台将会很棒。

澄清:问题不在于如何解决,而是如何检测它。我想要一个通用的解决方案,只要出现此问题就可以使用。

2 个答案:

答案 0 :(得分:5)

在较窄的范围内,您可以使用jQuery(获取宽度)和node.scrollWidth来获取内容溢出其边界的节点。

http://jsfiddle.net/tomprogramming/v3Q6W/3/

答案 1 :(得分:0)

如果您让内容流动,则首先不会获得水平滚动条。不要放太多宽度限制。通常,您只需设置包含所有内容的主列的(最小)宽度。您还可以约束某些垂直条的宽度(例如导航栏)。否则,请谨慎使用CSS width属性(以及其他此类机制)。

CSS白色空间属性也往往需要滚动条;明智地使用这个属性。这实际上仅适用于格式化代码,其中维护换行符非常重要,因为它们出现在HTML源代码中以便进行对齐。