文章/答案/技术大牛

发布

社区首页 >问答首页 >溢出隐藏元素

问溢出隐藏元素
EN

Stack Overflow用户

提问于 2010-02-07 01:57:20

回答 1查看 580关注 0票数 3

我想知道如何访问溢出的元素。我想将它们的内容复制到另一个div或其他什么地方。假设我得到一个具有5个li元素的ul，但只有两个是可见的。所以..。如何在另一个div中获取其他3个元素？

dom

javascript

jquery

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2010-02-07 02:21:42

你必须计算某些东西是否可见，要做到这一点，你必须做出假设。下面是一个简单的例子。它假设列表是一个传统的列表(因为每一项都在下一项的下面)。然后，它使用计算来确定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>

一种更通用的解决方案将会乏味得多。您将不得不满足项目的左，右，上方或下方的“视窗”。

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/2214052

复制

相似问题

问溢出隐藏元素
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问溢出隐藏元素EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问溢出隐藏元素
EN