溢出隐藏元素答案

【问题标题】：Overflow hidden elements溢出隐藏元素
【发布时间】：2010-02-06 17:57:20
【问题描述】：

我想知道如何访问溢出的元素。我想将他们的内容复制到另一个 div 或其他东西。假设我有一个 ul 有 5 li 元素，但只有两个是可见的。那么.. 我怎样才能在另一个 div 中获取其他 3 个元素？

【问题讨论】：

【解决方案1】：

您必须计算某些东西是否可见，为此您必须做出假设。下面是一个简单的例子。它假定列表是传统列表（因为每个项目都在下一个项目之下）。然后它使用计算来确定offsetTop 是否大于容器的高度。您可以对其进行定制，以查看某些内容是部分可见还是完全可见。

return this.offsetTop + $(this).height() > height;

表示如果项目不完全可见则应用效果。要不移动部分可见的项目，请将其更改为：

return this.offsetTop > height;

完整示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  var height = $("#container").height();
  $("#container li").filter(function() {
    return this.offsetTop + $(this).height() > height;
  }).wrapAll("<ul>").parent().appendTo("#overflow");
});
</script>
<style type="text/css">
div, ul, li { border: 0 none; padding: 0; margin: 0; }
#container { background: yellow; margin-bottom: 20px; height: 50px; overflow: hidden; }
#overflow { background: #CCC; }
</style>
</head>
<body>
<div id="container">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</div>
<div id="overflow">
</div>
</body>
</html>

更通用的解决方案会更加乏味。您必须满足“视口”左侧、右侧、上方或下方的项目。

【讨论】：