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