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

Question

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

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

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

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

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

是否有任何其他方法来检查导致溢出的元素？

注意:在按箭头键翻到下一页时，显示在窗口上的所有 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 元素并将其插入到可见窗口的正确位置。