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

Question

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

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

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

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

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

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

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

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

OverflowY: function(parentObj){

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

}

Answer 1

执行此操作的好方法是使用严格的HTML和CSS自动调整列。这意味着你可以只渲染你的内容，浏览器会处理剩下的事情。我找到了一篇试图解决这个问题的博客文章（http://alistapart.com/article/multicolumnlists）。你可以从那里收集一些好的想法。原始的stackoverflow帖子也有很好的问题：Wrapping lists into columns。

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

Answer 2

- 将div插入到具有css属性的页面{visibility：hidden; event-pointers：none}使div不可见并阻止它响应click / touch事件。

- 使用div来测量页面。我建议循环使用标签。 DOM文档操作是一项非常高的性能成本。

- 将该页面插入具有ID的数组，该ID指定其引用号（页码）。

- 然后获取当前页面ID，并循环到您的数组以获取上一页（左侧）或下一页（右侧）的索引。

- 使用类似的东西在DOM文档中插入该页面： 下一页： PGS [下一页] .style.right =“ - 100％”; 对于上一页： PGS [prePage] .style.right =“100％”;

PageContainer.appendChild（pgs [nexgPage]）;

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

- 如果你想要“删除”上一个当前页面“。你可能有z-index问题（即滑动页面在当前页面下并阻止查看效果）。所以一定要设置一个当前显示页面的z-index值也较低。

尽管如此，css'行更简单，性能更好（行宽：100％）。