Мне интересно, как я могу получить доступ к переполняющим элементам. Я хотел бы скопировать их содержимое в другой div или что-то еще. Допустим, у меня есть ul с 5 li элементами, но видны только два. Итак ... Как я могу получить другие 3 элемента в другом div?Переполнение скрытых элементов
Вы должны вычислить, если что-то видно или нет, и для этого вам необходимо сделать предположения. Ниже приведен простой пример этого. Он предполагает, что список является традиционным списком (в котором каждый элемент находится ниже следующего). Затем он использует расчет, чтобы определить, больше ли высота 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>
Более общее решение было бы гораздо более утомительным. Вам нужно будет обслуживать предметы, которые находятся слева, справа, выше или ниже «окна просмотра».