如何检测溢出的 HTML 元素

Posted 2023-03-13

【中文标题】如何检测溢出的 HTML 元素

【英文标题】：How to detect overflow HTML elements

【发布时间】：2015-08-28 11:27:13

【问题描述】：

我创建了一个导航栏，其中包含 div。

当我放大时，我通过css [overflow:hidden] 隐藏了 div 移出导航栏的情况。

我的目标是创建一个 java-script 变量，它会告诉我导航栏之外的所有 div （由于溢出而隐藏），因为我需要将它们添加到可折叠菜单中，即使单个 div 出来时也会出现导航栏。

提前致谢

【参考方案1】：

将scrollWidth/scrollHeight与元素的clientWidth/clientHeight进行比较。

if (e.scrollWidth > e.clientWidth)/*overflow*/

https://jsfiddle.net/pdrk50a6/

编辑：我不知道你的根元素，但最终它会是这样的。

document.body.onresize = function()
    var tR = [];
    var tL = document.querySelectorAll('div');

    for(var i=0, j=tL.length; i<j; i++)
        if (tL[i].scrollWidth > tL[i].clientWidth) tR.push(tL[i])

    //Do whatever you need with the tR elements (overflown)

【讨论】：

好的，但你能告诉我如何检测它何时发生变化，或者发生放大时生成的事件吗？

我们在谈论什么样的缩放（动作和设备 | 定制）？

我不知道该操作触发的任何特定跨浏览器事件。有很多方法可以检测到它，但这将是另一个问题/主题。

@Pinturikkio document.body.onresize 适用于现代浏览器（Chrome 和 IE9+），如果您有兴趣，可以说一下。

不客气。如果您对此主题没有其他问题，请随时接受答案，以便更多同行看到您的案例得到解决。