在运行时检测 javascript 文本或元素溢出

Posted 2023-05-08

【中文标题】在运行时检测 javascript 文本或元素溢出

【英文标题】：Detecting javascript text or element overflow at run time

【发布时间】：2014-10-02 15:15:02

【问题描述】：

我正在设计一个网站，它的设计是这样的。

在此站点中，我禁用了水平滚动，而用户必须使用左右箭头键滚动才能查看页面。

现在要支持此功能，我必须在每次在窗口中加载新页面时检查文本/元素溢出，如果它导致溢出，那么我必须剪切并将溢出元素移动到下一页以支持水平滚动。

为了支持响应式设计，我不是静态添加这些页面，而是动态创建这些页面，以便在窗口的宽度或高度发生变化的情况下，将显示的下一页将相应地调整为更改的宽度和高度 通过检查它的溢出。

现在我遇到的问题是，很难将幻灯片效果动画应用于此设计，因为要应用幻灯片效果，我们必须提前知道我们的下一个元素是什么来替换该幻灯片，但在这种情况下，我们的下一个元素被动态添加并显示下一页我必须首先将该元素加载到窗口，以便它首先检查溢出并创建页面，然后只显示页面。

还有其他方法可以检查导致溢出的元素吗？

注意：在通过箭头键翻到下一页时，所有显示在窗口上的3页都发生了变化。

我用来检查溢出的代码：-

OverflowY: function(parentObj)

    if(parentObj.offsetHeight < parentObj.scrollHeight)
        //Return true if overflow occurs
        return true;
    
    else
        return false;
    

【参考方案1】：

这样做的好方法是让您的列使用严格的 html 和 CSS 自动调整。这意味着您可以只渲染您的内容，而浏览器将负责其余的工作。我发现一篇博客文章试图解决这个问题（http://alistapart.com/article/multicolumnlists）。您可能可以从那里收集到一些好主意。原始的***帖子也有很好的问题：Wrapping lists into columns。

如果这不适合您的用例，验证元素的计算尺寸的常用方法是首先在您当前尺寸的容器内的可见窗口之外的某个位置（例如，左侧：-9999px）渲染元素'我想渲染它。然后您可以检查渲染的尺寸并根据需要调整标记。最后，克隆/分离修改后的 DOM 元素，并将其插入到正确位置的可见窗口中。

【参考方案2】：

-在页面中插入一个具有css属性的div visibility:hidden; event-pointers: none 使 div 不可见并阻止它响应点击/触摸事件。

-使用该 div 来测量页面。我会建议通过标签循环。 DOM 文档操作是非常耗费性能的。

-将该页面插入到具有指定其参考号（页码）的 ID 的数组中。

-然后获取当前页面 id，并遍历您的数组以获取上一个（左）或下一个（右）页面的索引。

-在 DOM 文档中插入该页面，如下所示： 对于下一页： pgs[nextPage].style.right="-100%"; 对于上一页： pgs[prePage].style.right="100%";

PageContainer.appendChild(pgs[nexgPage]);

-使用 jquery.js 或 transint.js（这将有助于避免非标准化规则的浏览器前缀问题）： $(pgs[next/prePag]).transition( right:0);

-如果需要，也可以删除“上一个当前”页面。您可能有 z-index 问题（即滑动页面在当前页面下方并阻止查看效果）。因此请确保设置降低当前显示页面的 z-index 值。

尽管如前所述，css 的行更简单，性能更好（行宽：100%）。